我不能在流體設計中將3 div的寬度擴展到父母寬度的全部100％

我得到3個div，意思是坐在一條線上。它們的寬度是每個父元素的33％。看起來3個div並沒有延伸到33％，而只是與其中的文本一樣寬。我不能在流體設計中將3 div的寬度擴展到父母寬度的全部100％

如何使它們完全是父元素的100％（3x33％）？

只有這個問題，因爲我正在使用流體佈局。

這裏是鏈接到JSFiddle。

CSS

.page_block { 
    max-width: 1000px; 
    min-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.foot_bar_links { 
    float: left; 
    width: 32%; 
    display: inline-block; 
    border: 1px solid black; 
} 

#foot_left { 
    min-height: 230px; 
    width: 68%; 
    float: left; 
} 

#foot_right { 
    min-height: 230px; 
    width: 32%; 
    float: left; 
} 

#foot_links1 { 
    min-height: 80px; 
    float: left; 
} 

#foot_links2 { 
    min-height: 70px; 
    float: left; 
} 

#foot_links3 { 
    min-height: 60px; 
    float: left; 
}

HTML

<div class="foot_bar_links"> 
    <div style="width: 50%"> 
     PROGRAMS<BR />EVENTS<BR />CALENDAR 
    </div> 
    <div style="width: 50%"> 
     <img src="images/calendar_s.jpg" style="vertical-align: middle"> 
    </div> 
</div> 
<div class="foot_bar_links"> 
    <div style="width: 50%"> 
     <b>STAY INFORMED</b> 
    </div> 
    <div style="width: 50%"> 
    <img src="images/newspaper_s.jpg" style="vertical-align: middle"> 
    </div> 
</div> 
<div class="foot_bar_links"> 
    <div style="width: 50%"> 
     <img src="images/phone_s.jpg" style="vertical-align: middle"> 
    </div> 
    <div style="width: 50%"> 
     ###### 
    </div> 
</div>

來源

2014-06-14 HelpNeeder

我可能有這可能是因爲，如果一種感覺最小寬度：600px？ – HelpNeeder

@HelpNeeder，放置3周的div在一行中，做到這一點，

#div1, #div2, #div3{ position: relative; float: left; } 
#div1{ position: relative; width: #Container-width/3 !important} 
#div1{ position: relative; width: #Container-width/3 !important} 
#div1{ position: relative; width: #Container-width/3 !important}

和HTML

<div id='div1'> 
    Div 1 contents goes here 
</div> 
<div id='div2'> 
    Div 2 contents goes here 
</div> 
<div id='div3'> 
    Div 3 contents goes here 
</div>

清除花車本

<div style='clear: both;'></div>

這將將三個div放在同一行中

來源

2014-06-14 04:32:03

啊！所以我所需要的只是關鍵字！重要......謝謝。 – HelpNeeder

@HelpNeedee關鍵字不是關鍵字。 –

使用'！important'永遠不會是一件好事，除非你有很好的理由這樣做（例如，壓倒你無法控制的第三方風格）。這是一種你正在對抗css特殊戰爭的氣味。 – gtramontina

@HelpNeeder，跟你坦白說...我無法理解你的問題是什麼。詢問時請詳細說明。但我可以給你一點建議。浮動div後最好添加

<div style='clear: both;'></div>

Div，它是那麼它將清除相對於位置的最後一個浮動列。當你有一個問題，請不要把你的代碼全部。舉一個簡單的例子並提出問題。請編輯問題和評論在此答案下確定。那麼我很樂意幫助你。

來源

2014-06-14 04:04:56

好的我會在我的OP中解釋一下。我的問題是。如何在一行中創建這3個div，但其中沒有一個實際擴展到它們所在的div元素的100％。 – HelpNeeder

也清除了代碼，並添加了jsfiddle示例。謝謝 – HelpNeeder

在你的樣式表，在＃foot_links2，替換：

float: left;

與

width: 100%;

然後在.foot_bar_links與

.foot_bar_links { 
    float: left; 
    width: 31%; 
    display: inline-block; 
    margin: 1%; 
    border: 1px solid black; 
} 
.foot_bar_links:first-child { 
    margin-left: 0; 
}

，取代一切，看看是否有差別。使用

<div style="clear: both;"></div>

也是很好的建議。

來源

2014-06-14 04:41:26

Waaaay簡單的解決方案（JSBin）：

HTML：

<article> 
    <section>Bla bla bla.</section> 
    <section>Bla bla bla.</section> 
    <section>Bla bla bla.</section> 
</article>

CSS：

article { 
    display: flex; 
}

Booom ...

來源

2014-06-14 05:04:31 gtramontina

我不能在流體設計中將3 div的寬度擴展到父母寬度的全部100％

回答

相關問題