0

您好，我的问题是如何用最小宽度（中央一个）填充 div 直到正确的 div 并且不破坏他

CSS

    。测试
    {
        高度：800px；
        显示：内联块；
    }

HTML

<body style="background-color:#e5e5e5;margin: 0">
    <div>
        <div style="
        height              : 37px;
    width               : 100%;
        background-color    : #3b5998;
    -webkit-box-shadow  : 0 2px 2px -2px rgba(0, 0, 0, .52);
    border-bottom       : 1px solid black;
    ">
        <div style="padding-top: 6px;margin-left: 76px;">
            <img src="images/logo-text.png" />
        </div>
    </div>
    <!-- -->
    <div>
        <div class="test" style="float : left;width: 130px;background-color : #e5e5e5"></div>
        <div class="test" style="min-width: 800px;background-color: white;"></div>
        <div class="test" style="float : right;width: 130px;background-color : red"></div>
    </div>
</div>
<div style="background-color : #e5e5e5;width : 100%;height: 100px">
</div>
</body>

完整代码 [1] http://pastebin.com/phrDAbPw

谢谢

4

2 回答 2

1

浮动外部 div 不是这样做的方法。您可以使用display: inline或display: inline-block使 div 元素保持内联。在不知道您的确切规格的情况下，这是一个简单的示例：

内联 CSS

<div style="display: block;">
    <div class="test" style="display: inline-block;width: 130px;background-color: #e5e5e5">hi</div>
    <div class="test" style="display: inline-block;width: 800px;background-color: white;">hey</div>
    <div class="test" style="display: inline-block;width: 130px;background-color: red">ho</div>
</div>

另请注意，这根本不会缩放——这意味着移动设备和分辨率较低的用户将拥有滚动条。考虑使用基于百分比的宽度来适应。否则，这是一个开始。

于 2013-04-09T12:18:05.257 回答
0

如果您不想破坏它，只需使用最大宽度。但是为什么你不使用 %-widths 呢？例如：

<div id="left">

</div>
<div id="main">

</div>
<div id="right">

</div>

CSS：

#left {
min-width: 200px;
width: 20%;
}

#main {
min-width: 700px;
width: 60%;
}

#right {
min-width: 150px;
width: 20%;
}
于 2013-04-09T12:01:35.263 回答