Question

我一直在研究一个数据库驱动页面的模板，理想情况下应该有四个div用于这样的内容：

----- -----
| 1 | | 2 |
----- -----
----- -----
| 3 | | 4 |
----- -----

相同的内容将始终位于相同的框中。新闻在＃1中，图像在＃2中等。根据提供的内容，可能存在所有这些部分或仅有一部分。如果例如框2不存在，我怎么能让框1扩展到父div的宽度？

即：

-----------
| 1       |
-----------
----- -----
| 3 | | 4 |
----- -----

或3＆amp; 4不存在

-----------
| 1       |
-----------
-----------
| 2       |
-----------

当然，这可能只能用if / then语句来完成，但我想知道在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"> &nbsp; 
                <img src="http://placehold.it/74x74"> &nbsp;
                <img src="http://placehold.it/74x74"> &nbsp; 
                <img src="http://placehold.it/74x74"> &nbsp;
            </p>
    </div>
</div> <!-- end auth-secondary-->

Answer 1

基于你的评论，理想情况下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;
}

它将为您提供此result

以第二个div为例，将给你result。

但是当div＃3和＃4不存在并且你希望div＃2在下一行时更难。您需要在脚本的服务器端添加额外的类或其他内容。

希望这会对你有帮助！

Answer 2

这是一个你可以使用的选项，但它不是纯粹的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);
    }
});

最后，小提琴：Demo

另一个显示添加另一个类如何影响布局的小提琴：Demo

Answer 3

让我们说新闻，图片，评论和广告课以这种方式定位你的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%') }

希望它有所帮助！

更新

即使其中一个部分没有退出

，这也会有效

根据内容不足自动扩展div

3 个答案:

更新