CSS 2周的div在一個線總是周圍的div

100％我有以下問題：我有兩個小div的一個div內側（寬度：80％），我想都小div的（浮動：左）以填滿洞的80％（=其他div的100％）。但是，如果我將寬度設置爲50％，它似乎總是比80％-div的一半大一點，我真的不知道爲什麼會發生這種情況。當然，我試圖將寬度設置爲40％ - 這對於一個小屏幕（約500px）看起來不錯，但是如果我拉伸窗口，我在右側有很多空間。CSS 2周的div在一個線總是周圍的div

我也試着設置左側的div浮動：左，另一個浮動：正確的，但隨後的問題是，如果在兩者之間的空間太小，它跳躍到下一行...

這個問題的任何想法？或者有沒有我忘記的設置... 我很高興你的任何想法。

<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%; 
}

來源

2014-03-30 user3477737

他們是否應用了任何填充/邊距？ – Kiee

那麼，你可以發佈你使用的代碼嗎？ –

爲問題添加代碼。 – user3477737

您不能確切地給它50％，因爲您已經爲其添加了保證金。無論如何，保證金都不會計算爲div的寬度。例如： - 如果您有一個寬度爲400px的div，並且您的邊距爲5px，那麼div的總寬度將變爲410px（距左邊距5px，右邊距5px）。

出於這個原因，你將不得不10px的減小寬度，使其準確400px.Now您的div寬度爲390px，增加了這些保證金後寬度總量將是400像素。
％div的情況也是如此。（在你的代碼中，如果你製作了.class1 50％，你的總div寬度將是你的margin px的50％+因此那些將不會是真正的50％）

實際上div的邊框和填充寬度也被加起來到div的寬度，但如果您使用此代碼 - >

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

在你的CSS，它總是安全的，因爲現在至少填充和邊界不會加起來div的寬度例如：如果你的DIV寬度爲400px，並且您將div的上述代碼添加到div中，您將div保持爲400px，並且填充和邊框將從現有的400px中獲取寬度，將邊框寬度爲5px，填充寬度爲5px添加到div。

利潤率並非如此。所以，無論什麼時候，你將不得不邊緣寬度加起來的股利或其他完全不添加保證金..

這是一個演示，請通過它去--->JS FIDDLE DEMO

而且這裏是差不多的一個很好的解釋 - >http://css-tricks.com/box-sizing/

來源

2014-03-30 10:15:14

Thx關於邊距的信息真的很有用！ Thx很多 – user3477737

也通過此鏈接 - > http://css-tricks.com/box-sizing/更多詳細的解釋 –

據我所知，你儘量做到有求必應。

這只是建議根據您提供的信息，請用小提琴或

嘗試以下操作：

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

來源

2014-03-30 10:18:07 brobken

CSS 2周的div在一個線總是周圍的div

回答

相關問題