Question

我有以下问题：我在div中有两个小div（宽度：80％），我想要两个小div（浮动：左）填充页面的80％（= 100％的其他） DIV）。但是，如果我将宽度设置为50％，它似乎总是比80％-div的一半大一点，我真的不知道为什么会发生这种情况。当然我试图将宽度设置为40％ - 这对于小屏幕（大约500px）来说看起来不错但是如果我拉伸窗口我在右侧有很多空间。

我也尝试将左边的div设置为float：left而另一个设置为float：right但是问题是如果两者之间的空间太小，它会跳到下一行......

对此问题的任何想法？还是有任何我忘记的设置...... 我很高兴你的任何想法。

<section id="mainSection">
        <div id="question">Question?</div>
        <section id="answerSection">
            <div id="answer1" class="class1">A1</div>
            <div id="answer2" class="class1">A2</div>
            <div id="answer3" class="class1">A3</div>
            <div id="answer4" class="class1">A4</div>
            <div class="clear"></div>
        </section>
    </section>

#mainSection{
    width: 80%;
    margin: auto;
    text-align: center;
}

#answerSection{
    width: 100%;
    margin: auto;
    text-align: center;
}

.class1{
    border-radius:8px;
    background-color: #CEE8FF;
    color: #000000;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 3px;
    margin-left: 4px;
    margin-right: 4px;
    padding: 15px;
    float: left;
    width: 40%;
}

Answer 1

您无法准确地给出50％，因为您已为其添加了保证金。保证金不会被计算为div的宽度，无论如何。例如： - 如果你有一个宽度为400px的div，你的边距为5px，那么div的总宽度将变为410px（左边距5px +右边5px）。

因此，您必须将宽度减小10px，使其精确到400px。现在您的div宽度将为390px，并且在将这些边距宽度相加后，总数将为400px。
与％divs的情况相同。（在你的代码中，如果你使.class1 50％你的总div宽度将是50％+你的保证金px。那么这些将不是真正的50％）

实际上div的边框和填充宽度也会加到div的宽度，但是如果你使用这个代码 - ＆gt;

*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

在你的CSS上，它总是安全的，因为现在至少填充和边框不会加到div的宽度，例如：如果你的div宽度是400px并且你添加了5px的边框宽度和填充宽度为5px到div与上面的代码写在css你div将保持400px和填充和边框将采取他们的宽度从现有的400px。

边距不是这种情况。所以无论如何，你都要为你的div增加保证金宽度，否则就不要加上保证金。

这是一个演示，请通过它---＆gt; JS FIDDLE DEMO

这是一个非常好的解释 - ＆gt; http://css-tricks.com/box-sizing/

Answer 2

据我所知，你试图让它变得敏感。

仅根据您提供的信息建议，请使用小提琴或

尝试以下方法：

CSS：

.small {
    width: 80%;
}
.column {
    width: 48%;
    margin-right: 4%;
    display: inline;
    float: left;
    background-color: green;
}
.column-fit {
    margin-right: 0 !important;
    margin-left: 0 important;
}

HTML：

<div class="small">
    <div class="column">text</div>
    <div class="column column-fit">text</div>
</div>

你可以在这里看到它：

fiddle

CSS 2 div在一行中总是100％的周围div

2 个答案: