Tôi làm cách nào để căn chỉnh nhiều div khối nội tuyến trong một vùng chứa mà không làm mất luồng của chúng?

này là dành cho một đồ thị thanh rất đơn giản, tôi đang làm việc trên,Tôi làm cách nào để căn chỉnh nhiều div khối nội tuyến trong một vùng chứa mà không làm mất luồng của chúng?

<div id="container"> 
    <div style="display:inline-block;"> 
    </div> 
    <div style="display:inline-block;"> 
    </div> 
    <div style="display:inline-block;"> 
    </div> 
</div>

Nếu tôi đặt các container để tương đối và các divs bên trong để tuyệt đối & đáy: 0, sau đó tất cả họ đều chồng chéo. Chúng chảy một cách độc đáo mà không có vị trí tuyệt đối nhưng sau đó biểu đồ thanh bị đảo lộn.

Lưu ý: Mục đích của tôi là giữ lại luồng nội tuyến của các thanh và không phải chỉ định rõ vị trí nằm ngang.

Dưới đây là ví dụ tốt hơn về sự cố.

http://jsfiddle.net/benstenson/NvvV6/1/

1) correct orientation but vertical alignment is top 
<div id="no-content" class="container"> 
    <div class="a"></div> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

2) wrong orientation, vertical alignment top 
<div id="has-content" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c">c</div> 
</div> 

3) mixed orientation, alignment is crazy 
<div id="mixed" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c"></div> 
</div> 

4) correct orientation and correct alignment but<br/> 
flow has been lost and horizontal position must be explicit 
<div id="absolute" class="container"> 
    <div class="a">a</div> 
    <div class="b">b</div> 
    <div class="c"></div> 
</div> 

5) here we go! 
<table class="container"> 
    <tr> 
     <td><div class="a">a</div></td> 
     <td><div class="b">b</div></td> 
     <td><div class="c"></div></td> 
    </tr> 
</table>

css

body {padding:1em;font-family:sans-serif;font-size:small;} 
.container { 
    height:2.5em;width:50%;margin-bottom:1em; 
    background-color:lightgray; 
    font-size:larger; 
    font-weight:bold; 
    text-transform:Uppercase; 
} 
div.container > div { 
    width:32%; 
    display:inline-block; 
    background-color:black; 
    color:cyan; 
} 

#absolute { position:relative;} 
#absolute > div {position:absolute;bottom:0px;opacity:.3;} 

.a {height:50%;} 
.b {height:60%} 
.c {height:80%;} 

td{width:33.333%;vertical-align:bottom;} 
td > div{background-color:black;color:cyan;}

Vậy là có một cách tốt hơn để làm điều này, như với flexbox webkit hoặc một cái gì đó?

Nguồn

2012-06-17 Benjamin

Hãy thử cung cấp cho chúng vị trí tương đối. – Jrod

@Jrod thuật ngữ cho tương đối so với tuyệt đối là khó hiểu với tôi trong css. Tôi đã thử cả hai cách để chắc chắn. Nó vẫn còn lộn ngược. – Benjamin

Bạn có thể cho thấy một ví dụ về những gì bạn đang chiến đấu so với những gì bạn muốn? – jcolebrand

này đang làm việc trên trình duyệt của tôi (Chrome 19)

enter image description here

html

<div id="container"> 
    <div id="a">a</div> 
    <div id="b">b</div> 
    <div id="c">c</div> 
</div>

css

#container { 
    height:10em; 
    width:90%; 
    border:1px solid black; 

    display:-moz-box; /* Firefox */ 
    display:-webkit-box; /* Safari and Chrome */ 
    display:box; 

    -webkit-box-align:end; 
} 

#container > div { 
    width:34%; 
    border:1px solid red; 

    -moz-box-flex:1.0; /* Firefox */ 
    -webkit-box-flex:1.0; /* Safari and Chrome */ 
    box-flex:1.0; 
} 

#a {height:20%} 
#b {height:50%} 
#b {height:70%}

http://jsfiddle.net/benstenson/m6vR7/

Nguồn

2012-06-19 01:15:18 Benjamin

Điều này không hoạt động trong IE (9). Nhưng tôi nghĩ IE 10 sẽ có nó. – Benjamin

Lưu ý rằng điều này sử dụng một phiên bản cũ hơn của cú pháp flexbox: http://css-tricks.com/old-flexbox-and-new-flexbox/ –

trình cho tôi khi hoàn toàn vị trí:

<style type='text/css'> 
#container{ 
position :relative; 
border :1px solid #000; 
height :60px; 
width  :100px; 
} 
.b{ 
    position:absolute; 
    width :20px; 
    bottom :0 
    } 
.b1{background:blue ;height:10px; left:0px} 
.b2{background:red ;height:30px; left:30px;} 
.b3{background:yellow;height:50px; left:60px} 
</style> 

<div id="container"> 
    <div class='b b1'></div> 
    <div class='b b2'></div> 
    <div class='b b3'></div> 
</div>

Fiddle here.

Nguồn

2012-06-17 04:07:19

Tôi có thể đã làm điều này nhưng tôi đã cố gắng giữ dòng chảy để tránh sử dụng 'left: _px'. Tôi tự hỏi nếu bạn cần phải sử dụng một trong hai bảng hoặc flexbox cho việc này. Tôi ở cách xa các pixel bất cứ khi nào có thể. – Benjamin

Điều này thực sự có vẻ là cách stackoverflow hiện đồ thị thanh rep trong giao diện hồ sơ người dùng. – Benjamin

@ Benjamin: Tôi đồng ý với triết lý của bạn, nhưng bạn có thể dành hàng tuần để cố gắng thực hiện điều này theo cách "thực hành tốt nhất" - đặc biệt khi đồ thị của bạn bắt đầu phức tạp hơn hoặc bạn bắt đầu thêm Tính năng, đặc điểm. Đừng quên rằng các phần tử DOM không thực sự có nghĩa là "biểu đồ" hay "đồ thị" ... có nghĩa là bạn có thể đủ màu để vượt qua các dòng một chút khi nói đến việc sử dụng chúng cho những thứ sáng tạo ngoài bố cục trang ngữ nghĩa. –

Đây là cách tiếp cận khác. Phải mất một wrapper thêm xung quanh mỗi thanh. Ý tưởng là tạo một số cột .bar-container có chiều rộng chính xác của các thanh và toàn bộ chiều cao của #graph.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing</title> 
     <style type="text/css"> 
      .bar-container{ 
       float:left; 
       height:100%; 
       margin-right:10px; 
       position:relative; 
       width:30%; 
      } 
      .bar { 
       border:1px solid black; 
       bottom:0; 
       position:absolute; 
       width:98%; 
      } 

      .bar-1 { 
       height:50px; 
      } 

      .bar-2 { 
       height:100px; 
      } 

      .bar-3 { 
       height:75px; 
      } 

      #graph { 
       height:500px; 
       margin:20px auto; 
       position:relative; 
       width:500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="graph"> 
      <div class="bar-container"> 
       <div class="bar bar-1"> 
       </div> 
      </div> 
      <div class="bar-container"> 
       <div class="bar bar-2"> 
       </div> 
      </div> 
      <div class="bar-container"> 
       <div class="bar bar-3"> 
       </div> 
      </div> 
     </div>  
    </body> 
</html>

Nguồn

2012-06-19 02:11:12 Jrod

Đó là sáng tạo. Nó giống như một cái bàn. – Benjamin

Tôi làm cách nào để căn chỉnh nhiều div khối nội tuyến trong một vùng chứa mà không làm mất luồng của chúng?

Trả lời

Các vấn đề liên quan