我是 CSS 的新手,但它对我来说仍然很神奇。
我想要我的 div movie_item_content_plot
在一条新线上。目前我使用 <br>
在 HTML 中,这工作正常。当我更换 <br>
与 clear: both;
div 出现在 movie_item_poster
之间和 movie_item_toolbar
——但这不是我想要的。应该在movie_item_content
但在 movie_item_year
下和 movie_item_plot
.
Here是一个可以玩的 fiddle 。
想要布局 ( <br>
)
布局错误 ( clear: both;
)
HTML
<div id="movie_item">
<div class="movie_item_poster">
<img src="..." style="max-width: 100%; max-height: 100%;">
</div>
<div id="movie_item_content">
<div class="movie_item_content_title">title</div>
<div class="movie_item_content_year">year</div>
<br> <!-- I want to replace this br -->
<div class="movie_item_content_plot">plot</div>
</div>
<div class="movie_item_toolbar">
Lorem Ipsum...
</div>
</div>
CSS
#movie_item {
display: block;
margin-top: 10px;
height: 175px;
}
.movie_item_poster {
float: left;
height: 150px;
width: 100px;
}
.movie_item_content {
float: right;
}
.movie_item_content_title {
float: left;
}
.movie_item_content_year {
float: right;
}
.movie_item_content_plot {
}
.movie_item_toolbar {
clear: both;
vertical-align: bottom;
width: 100%;
height: 25px;
}
最佳答案
像这样的事情怎么样。
<div id="movie_item">
<div class="movie_item_poster">
<img src="..." style="max-width: 100%; max-height: 100%;">
</div>
<div id="movie_item_content">
<div class="movie_item_content_year">year</div>
<div class="movie_item_content_title">title</div>
<div class="movie_item_content_plot">plot</div>
</div>
<div class="movie_item_toolbar">
Lorem Ipsum...
</div>
</div>
您不必同时 float movie_item_poster
和 movie_item_content
。只需 float 其中一个...
#movie_item {
position: relative;
margin-top: 10px;
height: 175px;
}
.movie_item_poster {
float: left;
height: 150px;
width: 100px;
}
.movie_item_content {
position: relative;
}
.movie_item_content_title {
}
.movie_item_content_year {
float: right;
}
.movie_item_content_plot {
}
.movie_item_toolbar {
clear: both;
vertical-align: bottom;
width: 100%;
height: 25px;
}
关于css - 将 div 移动到新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22490531/