1

我正在尝试显示 3 个彼此内联的宽度相同的框，然后随着页面变小而变小，然后当页面变得太小而不适合所有 3 个框时，它们都以 100% 的宽度显示在彼此下方。

摆弄完整代码：http: //jsfiddle.net/tBX6H/

CSS

.cont {
    width:80%;
    margin:0 auto 0 auto;
}

.box-container {
    width:100%;
    padding:5px;
}

.icon-box {
    margin-left: 45px;
    width:33%;
    display:inline;
    float:left;
}

HTML

<div class="cont">

<!-- Icon Box Container -->
<div class="box-container">

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<br class="clearfloat">   

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

<div class="icon-box">
<h4>BOX</h4>
<p>content here</p>
</div>

</div><!-- cont -->
4

1 回答 1

2

看起来你的问题是你有 45px 的边距，你在使用内联元素时必须考虑到这一点。

查看https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

关于这一切如何运作的一些很好的信息。

这是你的例子：http: //jsfiddle.net/MzEPN/

继承人应该是什么：http: //jsfiddle.net/MzEPN/1/

.icon-box {
    width:33%;
    display:inline;
    float:left;
    background:red;
}
于 2013-09-25T23:07:45.330 回答