創建與內部需要保持居中的兩個div div div

我正在做一個網站響應，並在主頁上，我應該插入兩個「容器」，應該居中和對齊。（在這種情況下，容器是兩個div裏面的圖片和文字）創建與內部需要保持居中的兩個div div div

我希望他們竟然能做出這樣

和網頁時「限制」時，兩個div應該擺正自己的位置以這種方式

我想這樣的，但它不正是我會得到

<div style=""> 
    <div style="width: 300px;float: left;"> 
     div 1 
    </div> 

    <div style="width: 300px;float: left;"> 
     div 2 
    </div> 
</div>

來源

2014-02-11 WhiteLine

這些圖像沒有運氣看看.. – codedude

現在是可見的:) – WhiteLine

爲什麼不使用像Zurb Foundation或Bootstrap這樣的樣板模板？爲你做所有的辛苦工作。 – BFWebAdmin

我會嘗試使用顯示：inline-block的財產。通過這種方式，您不必爲父級應用「溢出」，並且使塊爲中心變得非常容易。

HTML：

<div class="wrapper"> 
    <div class="box">Div 1</div> 
    <div class="box">Div 2</div> 
</div>

CSS：

.wrapper { 
    text-align: center; 

    /* Just decoration */ 
    border: 1px solid blue; 
    padding: 20px; 
} 
.wrapper .box { 
    display: inline-block; 
    width: 300px; 
    height: 50px; 

    /* Just decoration */ 
    border: 1px solid green; 
}

在小提琴http://jsfiddle.net/caprella/y4BQ3/

來源

2014-02-11 16:28:53 Alexandra

這是完美的 – WhiteLine

daaaang。這就是我所說的流暢。幾乎是黑客，因爲它依靠文本對齊：中心來保持框在中間 – codedude

我爲你快速安排了一些東西。當您想要切換樣式時，您將不得不使用媒體查詢來查找頁面的大小。仔細研究我的例子，你應該能夠根據自己的喜好找出一些東西。

<div id="box"> 
    <div class="innerBox"> 
     div 1 
    </div> 

    <div class="innerBox"> 
     div 2 
    </div> 
    <div class="clear"></div> 
</div>

而CSS ...

#box { 
    width:88%; 
    background:red; 
    padding:20px 6%; 
} 
.clear{clear:both} 
.innerBox { 
    width:41%; 
    float:left; 
    background:blue; 
    display:block; 
} 
.innerBox:first-child { 
    margin-right:18%; 
} 
@media screen and (max-width: 400px) { 
    #box .innerBox { 
     float:none; 
     width:100%; 
     margin:20px 0 0 0; 
    }  
    #box .innerBox:first-child { 
     margin-top:0; 
    } 
} 
    }

的jsfiddle鏈接：http://jsfiddle.net/x3JLX/

來源

2014-02-11 16:09:02 codedude

我不想使用媒體查詢，只是因爲我不希望div 2的內容會根據屏幕大小調整大小，我只是希望div被定位在一個在另一個之上時，兩者不能再一起保持在屏幕內 – WhiteLine

像這樣？ HTTP：//的jsfiddle。net/x3JLX/1/ – codedude

是的，當我回應dpwivagg的迴應時，我希望一切都以居中，無論是在開始時還是在兩個div的位移之後 – WhiteLine

看看這個小提琴。對現有代碼只進行一些簡單的更改，我將在下面進行介紹。 http://jsfiddle.net/ArKKG/

<div style="overflow:auto; height: 100% text-align: center;"> 
    <div style="width: 300px; height: 50px;float: left;"> 
     div 1 
    </div> 

    <div style="width: 300px;height: 50px;float: left;"> 
     div 2 
    </div> 
</div>

和一些CSS使它們可見，並保持分離的邊界。

div{ 
    border: 1px solid black; 
    margin: 4px; 
}

來源

2014-02-11 16:13:49 dpwivagg

我希望這兩個div將保持在中心 – WhiteLine

看看這個新的小提琴：http://jsfiddle.net/ArKKG/1/ 它應該是完美的 – dpwivagg

創建與內部需要保持居中的兩個div div div

回答

相關問題