基于内容不足的自动扩展div
我一直在为数据库驱动的页面开发一个模板，在理想情况下，对于这样的内容，应该有四个div：
----- -----
| 1 | | 2 |
----- -----
----- -----
| 3 | | 4 |
----- -----相同的内容将始终在相同的框中。新闻在第一，图片在第二，等等。根据所提供的内容，可能有所有这些部分，或只有一个。例如，如果方框2不存在，如何使方框1扩展到父div的宽度？
即：
-----------
| 1 |
-----------
----- -----
| 3 | | 4 |
----- -----或者如果3和4不存在
-----------
| 1 |
-----------
-----------
| 2 |
-----------当然，这可能只能用if / that语句来完成，但我想知道在CSS中是否有办法做到这一点.或者是jquery呢？我觉得这应该很简单，但我的大脑就是不知道该怎么做。
我设置了两个50%的宽度浮动div并排，但我不知道它将如何知道如何扩展，如果另一个是失踪。
谢谢!
编辑:添加HTML！这里还没有什么特别的..。
<div class="auth-secondary">
<div class="auth-upcoming auth-3d">
<span class="auth-h3">Upcoming Events</span>
<p>
<strong>March 5, 2014</strong><br>
Book signing
</p>
<p>
<strong>March 5, 2014</strong><br>
Ice cream party
</p>
</div><!-- end auth-upcoming -->
<div class="auth-media auth-3d">
<span class="auth-h3">Media Gallery</span>
<p>
<img src="http://placehold.it/74x74">
<img src="http://placehold.it/74x74">
<img src="http://placehold.it/74x74">
<img src="http://placehold.it/74x74">
</p>
</div>
</div> <!-- end auth-secondary-->回答 3
Stack Overflow用户
发布于 2014-02-21 20:05:03
基于您的评论(理想情况下，div不会出现在DOM中)，这里可能有一些可以帮助您的东西，纯CSS。
在HTML中为每一行添加一个“包装”div：
<div class="row">
<div>1</div>
<div>2</div>
</div>
<div class="row">
<div>3</div>
<div>4</div>
</div>连同这个CSS：
.row {
width: 600px;
display: table;
}
.row > div {
display: table-cell;
}它会给你这个结果
以第二个div为例，将给出这个结果。
但是，当div #3和#4不存在并且希望div#2位于下一行时，这会使它变得更加困难。您需要在脚本的服务器端添加一个额外的类或其他内容。
希望这能帮到你！
Stack Overflow用户
发布于 2014-02-21 19:56:16
这里有一个选项，您可以使用，但它不是纯css可悲，可能取决于您需要什么。
是如何将子级添加到包含它们的父级的？
我正在做的是在子类中添加一个类.half，这将把子类分解为宽度的一半。为了取得最终的结果，我确实需要知道我提出的问题的答案。
下面是一个演示，
css：
body * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.parent {
width: 600px;
height: 300px;
border: 5px solid #ffdd00;
margin-bottom: 20px;
padding: 5px;
}
.child {
width: 100%;
height: 100%;
background: #ff7200;
}
.child.half {
width: 49.5%;
display: inline-block;
vertical-align: top;
}jQuery：
var child = '<div class="child">I am a child DIV</div>',
halfChild = '<div class="child half">I am a child DIV</div>'
$('#fullTwo').on('click', function() {
if($('.parent').find('.child')) {
$('.parent').append(halfChild);
$('.parent').find('.child').addClass('half');
}
else {
$('.parent').append(child);
}
});最后，小提琴：演示
显示添加另一个类如何影响布局的另一个小提琴：演示
Stack Overflow用户
发布于 2014-02-21 19:51:24
让我们说，新闻、图片、评论和广告类是这样定位你的div的：
-------------------
| news | images |
|------------------
| comms | advert |
-------------------一个选项应该是，您始终拥有这个基本Html，并根据每个div的内容来决定元素的宽度：
<div class="news"></div>
<div class="images"></div>
<div class="comments"></div>
<div class="advertising"></div>现在你的js看起来是这样的：
var isNewsEmpty = $('.news').html() == "";
var isImagesEmpty = $('.images').html() == "";
var isCommentsEmpty = $('.comments').html() == "";
var isAdvertisingEmpty = $('.advertising').html() == "";
//now just set width if empty
if (isNewsEmpty) { $('.images').css('width','100%') }
if (isImagesEmpty) { $('.news').css('width','100%') }
if (isCommentsEmpty) { $('.advertising').css('width','100%') }
if (isadvertisingEmpty) { $('.comments').css('width','100%') }希望能帮上忙！
更新
即使其中一个区段不存在，这也是可行的。
https://stackoverflow.com/questions/21943608
复制相似问题
腾讯云开发者
