基本的HTML幫助。無法將頁面拆分爲三個

我試圖將網頁拆分爲三個相等的部分，但即使當我將寬度設置爲所有三個div的33％時，第三個div也會轉到新的一行。如果我將最後一個div作爲32％，它會回來。對於div甚至容器都沒有保證金或填充。基本的HTML幫助。無法將頁面拆分爲三個

任何幫助，高度讚賞。

2015-10-16 Prab

請告訴我們有問題的HTML。 – davejagoda

你介意接受答案嗎？ :) –

這裏是一個非常快速解決您的問題。

body { 
 
    padding: 0; 
 
} 
 

 
.col-container { 
 
    width: 100%; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.col-third { 
 
    width: 33%; 
 
    float: left; 
 
} 
 

 
.col-third:first-child, .col-third:last-child { 
 
    background: wheat; 
 
} 
 

 
.col-third:nth-child(2n){ 
 
    background: red; 
 
}

<div class="col-container"> 
 
    <div class="col-third"> 
 
     <p>content</p> 
 
    </div> 
 
    <div class="col-third"> 
 
     <p>content</p> 
 
    </div> 
 
    <div class="col-third"> 
 
     <p>content</p> 
 
    </div> 
 
</div>

單擊運行片斷看

來源

2015-10-16 21:45:50

訪問您的代碼會更容易回答您的問題，爲@davejagoda所說的。

但我會推薦的是，您使用Bootstrap使事情變得更容易。自舉，你可以一個row專區內使用的一類col-md-4每個部分，如：

<div class="row"> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
    <div class="col-md-4">...</div> 
</div>

然後添加自定義zero類（你可以叫它任何你喜歡的），如：

<div class="zero row"> 
    <div class="zero col-md-4">...</div> 
    <div class="zero col-md-4">...</div> 
    <div class="zero col-md-4">...</div> 
</div>

最後您可以自定義空白和邊距的附加.zero類，如：

.zero { 
    padding: 0; 
    margin: 0; 
}

這應該做工作。

我希望能有所幫助。如果有，請將此答案標記爲有用。如果您需要更多幫助，請隨時致電contact我。

對不起，我忘了件事：

爲了使其工作，僅此鏈接添加到您的文檔的<head>...</head>： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

它包含了所有引導CSS最後更新庫。如果您想要使用額外的動畫選項，您還可以抓取JavaScript文件。

來源

2015-10-16 21:55:30

試試這個它應該工作：

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    display: -webkit-flex; 
 
    text-align: center; 
 
} 
 
.div1 { 
 
    -webkit-flex: 1; 
 
    border: 1px solid #000000; 
 
} 
 
.div2 { 
 
    -webkit-flex: 1; 
 
    border: 1px solid #000000; 
 
} 
 
.div3 { 
 
    -webkit-flex: 1; 
 
    border: 1px solid #000000; 
 
}

<body> 
 
    <div class="div1"> 
 
    Hola 
 
    </div> 
 
    <div class="div2"> 
 
    Hola 
 
    </div> 
 
    <div class="div3"> 
 
    Hola 
 
    </div> 
 
</body>

來源

2015-10-17 02:43:59

基本的HTML幫助。無法將頁面拆分爲三個

回答

相關問題