Question

我正在尝试显示3个相互内嵌的方框，所有相等的宽度然后随着页面变小而变小，然后当它变得太小而不是所有3个方框时，它们全部显示在彼此100％宽度之下。

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 -->

Answer 1

看起来你的问题是你有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;
}

使用响应式CSS显示3个内嵌框

1 个答案: