CSS盒子位置浮動

Question

下午好！ 我有一個關於3個獨立框的問題，它們都應該包含文本。

• 1左上
• 1右上方
• 在中間的文本字段，也可能是一箱（我該怎麼辦 嗎？）
• 1盒下來中心

我知道這是關於造型，但請你能幫助我嗎？目前，我在我的CSS中有以下內容：我刪除了顏色，文本等等。是否也可以找到一種方法，對於較小的屏幕，這些框正在縮小其大小。希望你明白我的意思。

#box1 { 
    width: 300px; 
    padding: 25px; 
    margin: 100px; 
    float: left; 
} 


#box2 { 
    width: 300px; 
    padding: 25px; 
    margin: 100px ; 
    float: right; 

} 

#box3 { 
    width: 400px; 
    padding: 10px; 
    margin: auto; 

我舉了一個例子，http://jsfiddle.net/3cUF5/5/。 問題是，我需要中間的綠色框和3藍色框不應該限制在800px。希望你能幫助。或者有沒有一個JQuery插件？技巧與提示，歡迎

Answer 1

解決方案

你可以使用純CSS來解決問題。使用CSS Flexbox，您可以輕鬆地集中您的內容。你可以，如果你想你的容器沒有100％的寬度變爲800像素

CSS

.boxes { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    justify-content: center; 
    width: 100%; 
} 

.box { 
    background-color: blue;  
    height: 100px; 
    margin: 30px; 
    width: 100px;  
} 

.boxM { 
    background-color: green; 
    height: 100px;   
    width: 100px; 
} 

HTML

<div class="boxes"> 
    <div class="box">Box1</div> 
    <div class="box">Box2</div> 
    <div class="box">Box3</div> 
</div> 
<div class="boxes">  
    <div class="boxM">Box2</div> 
</div> 

小提琴

http://jsfiddle.net/3cUF5/11/

Answer 2

你可以這樣做（除去浮並將它們設置爲顯示：inline-block的）：

CSS

#boxes { 
    width: 800px; 
    text-align: center; 
} 

#boxes .box { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    margin: 30px; 
    background-color: blue; 
} 

#boxes .boxM { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    margin: 0 auto; 
    background-color: green; 
} 

DEMO HERE

Answer 3

如果每個div都有靜態寬度，只需設置margin-left: 190px至boxM類。 此外，您必須刪除#boxes中的float: left屬性，並在第一個boxes div後添加清除。

因此HTML文件的結果會是這樣

<div id="boxes"> 
    <div class="box">Box1</div> 
    <div class="box">Box2</div> 
    <div class="box">Box3</div> 
</div> 

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

<div id="boxes">  
    <div class="boxM">Box2</div> 
</div> 

和你的CSS：

#boxes { 
    width: 800px; 
} 

#boxes .box { 
    width: 100px; 
    height: 100px; 
    margin: 30px; 
    float: left; 
    background-color: blue; 
} 

#boxes .boxM { 
    width: 100px; 
    height: 100px; 
    margin-left: 190px; 
    background-color: green; 
} 

Answer 4

是你需要什麼？ DEMO

#boxes { 
 
    width: 800px; 
 
    text-align: center; 
 
} 
 
#boxes .box { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 30px; 
 
    display: inline-block; 
 
    background-color: blue; 
 
} 
 
#boxes .boxM { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    margin: auto; 
 
    display: block; 
 
}

<div id="boxes"> 
 
    <div class="box">Box1</div> 
 
    <div class="box">Box2</div> 
 
    <div class="box">Box3</div> 
 
</div> 
 

 
<div id="boxes"> 
 

 
    <div class="boxM">Box2</div> 
 

 
</div>

Answer 5

絕對定位不是太靠譜。將使用任何大小的容器。

#boxes { 
 
    width: 800px; 
 
    position: relative; 
 
} 
 

 
#boxes .box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: absolute; 
 
} 
 
#boxes .box1 { 
 
    left: 0; 
 
} 
 
#boxes .box2 { 
 
    left: 50%; 
 
    margin-left: -50px; /* half width */ 
 
} 
 
#boxes .box3 { 
 
    right: 0; 
 
} 
 
#boxes .boxM { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 120px; 
 
    left: 50%; 
 
    margin-left: -50px; /* half width */ 
 
}

<div id="boxes"> 
 
    <div class="box box1">Box1</div> 
 
    <div class="box box2">Box2</div> 
 
    <div class="box box3">Box3</div> 
 
    <div class="boxM">Box2</div> 
 
</div>

而且你不應該在你的HTML中使用的ID超過一​​次。