Làm cách nào để có thể căn chỉnh hai div theo chiều ngang?

tôi cần phải sắp xếp hai divs bên cạnh nhau, vì vậy mà mỗi chứa một tiêu đề và một danh sách các mục, tương tự như:Làm cách nào để có thể căn chỉnh hai div theo chiều ngang?

<div> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div>

Đó là khá dễ dàng để làm với các bảng, nhưng tôi không muốn sử dụng bảng. Làm thế nào tôi có thể đạt được điều này?

Nguồn

2010-03-10 DaveDev

nổi divs trong một container phụ huynh, và phong cách nó như vậy:

.aParent div { 
 
    float: left; 
 
    clear: none; 
 
}

<div class="aParent"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Nguồn

2010-03-10 13:24:30 Robusto

Nếu bạn đưa ra một yếu tố một phao, nó là không cần thiết lúc tốt nhất để cũng cung cấp cho nó một 'rõ ràng: none'. –

Điều này đã được trả lời khi một số trình duyệt cũ hơn không luôn luôn thực thi 'clear: none' với float. – Robusto

Quấn cả hai trong một container như vậy:

.container{ 
 
    float:left; 
 
    width:100%; 
 
} 
 
.container div{ 
 
    float:left; 
 
}

<div class='container'> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Nguồn

2010-03-10 13:26:15 Brant

Bản thân thùng chứa không phải được thả nổi. –

Bạn cần phải float the divs theo hướng yêu cầu, ví dụ: left hoặc right.

Nguồn

2010-03-10 13:26:27 Sarfraz

-1

<html> 
<head> 
<style type="text/css"> 
#floatingDivs{float:left;} 
</style> 
</head> 

<body> 
<div id="floatingDivs"> 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div id="floatingDivs"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

</body> 
</html>

Nguồn

2010-03-10 13:27:46

Chỉ có thể sử dụng một lần. –

<div> 
<div style="float:left;width:45%;" > 
    <span>source list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 

<div style="float:right;width:45%;"> 
    <span>destination list</span> 
    <select size="10"> 
     <option /> 
     <option /> 
     <option /> 
    </select> 
</div> 
<div style="clear:both; font-size:1px;"></div> 
</div>

rõ ràng phải được sử dụng để ngăn chặn các lỗi float (chiều cao uốn cong bên ngoài Div).

style="clear:both; font-size:1px;

Nguồn

2010-03-10 13:27:58 coderex

Div lồng nhau cuối cùng là gì? Tại sao 'rõ ràng: cả hai'? tại sao 'font-size: 1px'? – Cheeso

Để xóa các phao. Tôi tin rằng "font-size: 1px" là một điều tương thích với IE. Tôi có thể sai. –

Thêm một lớp cho mỗi divs:

.source, .destination { 
 
    float: left; 
 
    width: 48%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.source { 
 
    margin-right: 4%; 
 
}

<div class="source"> 
 
    <span>source list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div> 
 
<div class="destination"> 
 
    <span>destination list</span> 
 
    <select size="10"> 
 
     <option /> 
 
     <option /> 
 
     <option /> 
 
    </select> 
 
</div>

Đó là một tỷ lệ phần trăm giải pháp chung - sử dụng độ rộng pixel dựa thường là nhiều hơn đáng tin cậy. Có thể bạn sẽ muốn thay đổi các kích cỡ lề/đệm khác nhau.

Bạn cũng có thể tùy chọn bọc HTML trong một div container, và sử dụng CSS này:

.container { 
    overflow: hidden; 
}

này sẽ đảm bảo nội dung tiếp theo không quấn quanh các yếu tố nổi.

Nguồn

2010-03-10 15:16:00 DisgruntledGoat

-1

Đối với mục đích của bạn, tôi muốn sử dụng vị trí thay vì thả nổi:

http://jsfiddle.net/aas7w0tw/1/

Sử dụng một mẹ với vị trí tương đối:

position: relative;

Và trẻ em ở vị trí tuyệt đối:

position: absolute;

Trong phần thưởng, bạn có thể điều khiển độ mờ tốt hơn sions của các thành phần của bạn.

Nguồn

2015-05-27 12:38:58

nếu bạn có hai divs, bạn có thể sử dụng để sắp xếp các divs bên cạnh nhau trong cùng một hàng:

#keyword { 
 
    float:left; 
 
    margin-left:250px; 
 
    position:absolute; 
 
} 
 

 
#bar { 
 
    text-align:center; 
 
}

<div id="keyword"> 
 
Keywords: 
 
</div> 
 
<div id="bar"> 
 
    <input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40> 
 
    <input type = button name="go" Value="Go ahead and find" onClick="search()"> 
 
</div>

Nguồn

2015-08-28 20:51:15

Ngày nay, chúng ta có thể sử dụng một số flexbox để gắn kết những divs.

.container { 
 
    display: flex; 
 
}

<div class="container"> 
 
    <div> 
 
     <span>source list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 

 
    <div> 
 
     <span>destination list</span> 
 
     <select size="10"> 
 
      <option /> 
 
      <option /> 
 
      <option /> 
 
     </select> 
 
    </div> 
 
</div>

Nguồn

2016-07-19 22:10:44

Cảm ơn, không biết 'display: flex'. Thêm liên kết để mọi người dễ dàng nhìn thấy nền CSS3. – akauppi

Làm cách nào để có thể căn chỉnh hai div theo chiều ngang?

Trả lời

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