Câu trả lời:
Đó là một cái gì đó khác sau đó:
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->Một div nội tuyến là một quái vật của web & nên bị đánh cho đến khi nó trở thành một nhịp (ít nhất 9 lần trong số 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>
... Trả lời câu hỏi ban đầu ...
Hãy thử viết nó như thế này:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Đã đọc câu hỏi này và câu trả lời một vài lần, tất cả những gì tôi có thể làm là giả định rằng có khá nhiều chỉnh sửa đang diễn ra, và tôi nghi ngờ rằng bạn đã nhận được câu trả lời sai dựa trên việc không cung cấp đủ thông tin. Manh mối của tôi đến từ việc sử dụng brthẻ.
Xin lỗi Darryl. Tôi đọc class = "inline" là style = "display: inline". Bạn có câu trả lời đúng, ngay cả khi bạn sử dụng tên lớp có vấn đề về ngữ nghĩa ;-)
Việc sử dụng sai brđể cung cấp bố cục cấu trúc thay vì bố trí văn bản là quá phổ biến đối với sở thích của tôi.
Nếu bạn muốn đặt nhiều hơn các phần tử nội tuyến bên trong chúng divsthì bạn nên thả nổi các phần tử đó divthay vì đặt chúng thành nội tuyến.
Divs nổi:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======
Divs nội tuyến:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++
Nếu bạn là người cũ, thì đây là giải pháp của bạn và mất các brthẻ đó:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
lưu ý rằng chiều rộng của các div này là chất lỏng, vì vậy hãy thoải mái đặt chiều rộng cho chúng nếu bạn muốn kiểm soát hành vi.
Cảm ơn, Steve
Sử dụng display:inline-blockvới lề và truy vấn phương tiện cho IE6 / 7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>
Bạn nên sử dụng
<span>thay vì<div>cho cách nội tuyến chính xác . bởi vì div là một phần tử mức khối và yêu cầu của bạn là các phần tử mức khối nội tuyến.
Đây là mã html theo yêu cầu của bạn:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>
display:inline-block;float:left;vì vậy bạn phải thay đổi tài sản hiển thị một display:inline-block;cách mạnh mẽ
Ví dụ một
div {
display: inline-block;
}
Ví dụ hai
div {
float: left;
}
bạn cần xóa phao
.main-div:after {
content: "";
clear: both;
display: table;
}
Như đã đề cập, display: inline có lẽ là những gì bạn muốn. Một số trình duyệt cũng hỗ trợ các khối nội tuyến.
Chỉ cần sử dụng div trình bao bọc với "float: left" và đặt các hộp bên trong cũng chứa float: left:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>ok, đối với tôi:
<style type="text/css">
div{
position: relative;
display: inline-block;
width:25px;
height:25px;
}
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>Tôi sẽ sử dụng nhịp hoặc nổi div trái. Vấn đề duy nhất với việc nổi là bạn phải xóa float sau đó hoặc div chứa phải có kiểu tràn được đặt thành tự động
Tôi biết mọi người nói rằng đây là một ý tưởng tồi tệ, nhưng thực tế nó có thể hữu ích nếu bạn muốn làm một cái gì đó như hình ảnh gạch với các bình luận bên dưới chúng. ví dụ Picasaweb sử dụng nó để hiển thị hình thu nhỏ trong album.
Xem ví dụ / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (lớp goog-inline-block; Tôi viết tắt nó để IB ở đây)
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }Cho CSS đó, đặt div của bạn thành lớp ib và bây giờ, nó là một phần tử khối nội tuyến kỳ diệu.
Bạn cần phải chứa ba div. Đây là một ví dụ:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}Lưu ý: thuộc tính bán kính đường viền là tùy chọn và chỉ hoạt động trong các trình duyệt tuân thủ CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>Lưu ý rằng các div 'foo' 'bar' và 'baz' đều được giữ trong div 'chứa'.
Tôi nghĩ bạn có thể sử dụng cách này mà không cần sử dụng bất kỳ css nào -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>Ngay bây giờ bạn đang sử dụng phần tử cấp khối theo cách bạn đang nhận được kết quả không mong muốn. Vì vậy, bạn có thể bạn yếu tố nội tuyến như span, nhỏ, vv
<span>foo</span><span>bar</span><span>baz</span><div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div><div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */