Question

我想设置三个标题div的25％50％25％水平，如image所示，已经在标题div中放置了三个div与对应的css，但div是垂直放置here

已经检查过以前无法获得领先的答案，请给我指示！感谢

HTML code：

    <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;
     }

Answer 1

您必须设置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/

Answer 2

默认情况下，您的元素显示为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

Answer 3

用于浮动元素

*{   // 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

Answer 4

您可以使用css order属性尝试。

代码：

<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/

设置三个标题div的25％50％25％水平

4 个答案: