設置三個標題div的25％50％25％水平

我想設置三個標題div的25％50％25％水平，如image所示，已經爲它們放置了三個具有相應CSS的標題div，但div被放置垂直顯示here。設置三個標題div的25％50％25％水平

檢查了以前的答案，我無法領先，請給我一個方向！感謝

HTML代碼：

<div id="header"> 
    <div id="header-left" class="div-border"> 
    <h6 align="center">Image holder</h6> 
    </div> 
    <div id="header-middle" class="div-border"> 
    <h1 align="center">Dashboard</h1> 
    </div> 
    <div id="header-right" class="div-border"> 
    <h6> 
    <span > 
    <span style="line-height: 24px;" id="border-around"> 
    <b>Profile | Help | Admin </b> 
    </span> 
    </span> 
    </h6> 
    </div> 
    </div>

CSS代碼：

#header { 
     background-color:#fecb00; 
     color:white; 
     text-align:center; 
     padding:5px; 
    } 
    #header-left { 
     width: 25%; 
    } 
    #header-middle { 
     width: 50%; 
    } 
    #header-right { 
     width: 25%; 
    } 
    .div-border { 
     border: 2px solid silver; 
    } 
    #border-around { 
     border: 1px solid #000; 
    }

來源

2014-10-17 Java.beginner

你必須設置box-sizing: border-box包括邊框寬度計算，設定display: inline-box內嵌顯示元件，vertical-align: middle和消除之間白色間距div的。

.div-border { 
    box-sizing: border-box; 
    display: inline-block; 
    vertical-align: middle; 
}

小提琴：http://jsfiddle.net/khbv2mac/1/

來源

2014-10-17 10:33:39 emmanuel

感謝@emmanuel，這就是我所追求的.... – 2014-10-17 10:40:00

歡迎您！ – emmanuel 2014-10-17 10:44:29

你的元素被顯示爲缺省block元件，這意味着它們將採取的整個「線」自己除非浮動。您可以浮動您的元素，或顯示它們inline-block。
三個元素的累積寬度大於頁面寬度的100％，因爲它們的邊框不包含在指定的寬度中。您可以通過更改box-sizing來解決此問題。

注意：我已經註釋了您的inline-block元素之間的空白區域。由於它們以內聯方式顯示，因此它們之間的空間將得到確認。

body{margin:0} 
 
#header { 
 
    background-color:#fecb00; 
 
    color:white; 
 
    text-align:center; 
 
} 
 
#header-left { 
 
    width: 25%; 
 
} 
 
#header-middle { 
 
    width: 50%; 
 
} 
 
#header-right { 
 
    width: 25%; 
 
} 
 
.div-border { 
 
    /* Style changes here */ 
 
    display:inline-block; 
 
    box-sizing:border-box; 
 
    border: 2px solid silver; 
 
} 
 
#border-around { 
 
    border: 1px solid #000; 
 
}

<div id="header"> 
 
    <div id="header-left" class="div-border"> 
 
     <h6 align="center">Image holder</h6> 
 
    </div><!-- 
 
--><div id="header-middle" class="div-border"> 
 
     <h1 align="center">Dashboard</h1> 
 
    </div><!-- 
 
--><div id="header-right" class="div-border"> 
 
     <h6><span><span style="line-height: 24px;" id="border-around"><b>Profile | Help | Admin </b></span></span></h6> 
 
    </div> 
 
</div>

JSFiddle

來源

2014-10-17 10:34:09 George

謝謝@George， – 2014-10-17 10:41:25

用於浮動元件作爲這樣

*{ // add this line 
    box-sizing:border-box; // add this line 
} // add this line 
#header { 
    background-color:#fecb00; 
    color:white; 
    text-align:center; 
    padding:5px; 
    overflow:hidden; // add this line 
} 
#header-left { 
    width: 25%; 
    float:left; // add this line 
} 
#header-middle { 
    width: 50%; 
    float:left; // add this line 
} 
#header-right { 
    width: 25%; 
    float:left; // add this line 
} 
.div-border { 
    border: 2px solid silver; 
}

Demo

來源

2014-10-17 10:37:02

謝謝@Rohit Azad， – 2014-10-17 10:41:45

你可以嘗試使用CSS順序屬性。

代碼：

<html> 
<head> 
<style> 
#header { 
     background-color:#fecb00; 
     color:white; 
     text-align:center; 
     padding:5px; 
     width:100%; 
     display: -webkit-flex; /* Safari */ 
    display: flex; 
    } 
    #header-left { 
     width: 25%; 
     -webkit-order:1; 
     order:1; 
    } 
    #header-middle { 
     width: 49%; 
     -webkit-order:2; 
     order:2; 
    } 
    #header-right { 
     width: 25%; 
     -webkit-order:3; 
     order:3; 
    } 
    .div-border { 
     border: 2px solid silver; 
    } 
    #border-around { 
     border: 1px solid #000; 
    } 
</style> 
</head> 
<body> 
    <div id="header"> 
    <div id="header-left" class="div-border"> 
    <h6 align="center">Image holder</h6> 
    </div> 
    <div id="header-middle" class="div-border"> 
    <h1 align="center">Dashboard</h1> 
    </div> 
    <div id="header-right" class="div-border"> 
    <h6> 
    <span > 
    <span style="line-height: 24px;" id="border-around"> 
    <b>Profile | Help | Admin </b> 
    </span> 
    </span> 
    </h6> 
    </div> 
    </div> 
</body> 
</html>

小提琴：http://jsfiddle.net/invincibleJai/sbuveeLw/

來源

2014-10-17 10:46:00 invinciblejai

謝謝@jai，爲了方向... – 2014-10-17 10:47:37

這個'寬度：49％'的任何特殊原因？謝謝@jai – 2014-10-17 11:07:59

沒什麼多少隻是保留了一些％的邊際，填充，邊界......我通常這樣做，但不是必需的。 – invinciblejai 2014-10-17 11:15:30

設置三個標題div的25％50％25％水平

回答

相關問題