[英]Inline-block elements expanding space below
Creating a page layout using inline-block elements (vertically aligned to the top). 使用内联块元素(垂直对齐到顶部)创建页面布局。 The only issue, is that inline-block elements below another set of inline block elements will not fold into open space like floated elements do.
唯一的问题是,另一组内联块元素下面的内联块元素不会像浮动元素那样折叠到开放空间中。 It's almost as if it obeys row-like rules.
几乎就像它遵循行式规则一样。 Are there any fixes for this?
是否有针对此的修复程序?
Layout example in JSFiddle JSFiddle中的布局示例
CSS 的CSS
* {
font-family:helvetica;
font-size:18px;
}
.container {
margin:0 auto;
width:90vp;
}
.main_content {
background:red;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:200px;
}
.content_details {
background:blue;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:22.39%;
margin-left:01.56%;
min-height:250px;
}
.comments {
background:green;
display:inline-block;
vertical-align:top;
box-sizing:border-box;
width:76.04%;
min-height:150px;
}
HTML 的HTML
<div class="container">
<div class="main_content">
<h1>Main Content</h1>
</div
><div class="content_details">
<h2>Details</h2>
</div
><div class="comments">
<h2>Comments</h2>
</div>
</div>
Please note I can change the mark-up to create only two inline-block elements (creating two columns), however I would like to know if there is a fix for 3 separate inline-block elements (like in the JSFiddle example), that way I wouldn't need to add extra mark-up. 请注意,我可以更改标记以仅创建两个内联块元素(创建两列),但是我想知道是否有针对3个单独的内联块元素的修复程序(例如JSFiddle示例),这样,我就不需要添加额外的标记。
Neither floats nor inline-block will do what you want there, unless you wrap each column in its own div. 除非您将每一列都包装在自己的div中,否则float或inline-block都不会满足您的要求。 Short of that, there are JavaScript solutions for doing this, such as Masonry.
缺少这些,还有一些JavaScript解决方案可以做到这一点,例如Masonry。 (It involves a lot of positioning, though.)
(不过,这涉及很多定位。)
No there isn't.. Not like you are talking about. 不,没有。.不是您在说的。 You'd have to use:
您必须使用:
<div id="col1">
<div id="maincontent"></div>
<div id="comments"></div>
</div>
<div id="details"></div>
Then you would have #col1
and #details
as inline-block
elements. 然后,您将有
#col1
和#details
作为inline-block
元素。
The whole point of an inline-block
is that it is inline (ie on a line with other elements) it isn't acting like a table as you suggested, it's acting like a line of text (as it should) that is wider than it's container and breaking to the next line down. 一个整点
inline-block
是,它是内联 (即与其他元素的线)它不像个表如你所说,它的作用就像一个文本行(因为它应该)比宽它是容器,并中断到下一行。
See here: http://jsfiddle.net/GXmM6/ for a working example 有关有效的示例,请参见此处: http : //jsfiddle.net/GXmM6/
Did I get it right that you wanted the .content_details
to be a sidebar? 我是否正确,您希望
.content_details
成为.content_details
工具栏? Then I just changed it from display: inline-block
to float: right
to place .comments
seamlessly beneath your .main-content
. 然后,我只是将其从
display: inline-block
更改为float: right
将.comments
无缝地放置在.main-content
下的.main-content
。 See http://jsfiddle.net/koivo/7UqqF/ for working example. 有关工作示例,请参见http://jsfiddle.net/koivo/7UqqF/ 。 Think that even works just with
display: block
... 认为甚至只适用于
display: block
...
* {
font-family: helvetica;
color: white; /* added */
font-size: 18px;
}
.container {
margin: 0 auto;
width: 90vp;
}
.main_content {
background: red;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 200px;
}
.content_details {
background: blue;
/* display: inline-block; */
float: right; /* added */
vertical-align: top;
box-sizing: border-box;
width: 22.39%;
margin-left: 01.56%;
min-height: 250px;
}
.comments {
background: green;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width: 76.04%;
min-height: 150px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.