2

我正在尝试将 3 个 div 相互对齐

我有

#header {
    width:100%;
    height:160px;
}

作为主容器，因此容器适合页面的宽度（100%）

然后

.header-left {
    width:33%;
    display:inline-block;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    display:inline-block;
}
.header-right {
    width:33%;
    display:inline-block;
}

对于容器中的 3 个 div。

我需要在页面中心和其他 2 个 div 之间的 .logo div，然后是徽标 div 两侧的其他 2 个 div。

徽标 div 需要为 409px，因为这就是徽标的宽度。

出于某种原因，它只是全部显示在左侧，我不知道为什么

4

5 回答 5

2

如果您按如下方式排列标题 HTML，则一种解决方案是可能的：

<header class="ex1">
    <div class="header-left">the left stuff </div>
    <div class="header-right">the right stuff</div>
    <div class="logo"><img src="http://placehold.it/409x138" ></div>
</header>

并应用以下 CSS：

header {
    border: 1px solid blue;
    width: 100%;
    min-width: 800px;
    height: 160px;
    overflow: auto;
}
.ex1 .header-left {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: left;
}
.ex1 .logo {
    width: 409px; /* width of the logo */
    margin:10px auto 0 auto;
    border: 1px solid red;
}
.ex1 .logo img {
    display: block;
}
.ex1 .header-right {
    display:inline-block;
    width: 33%;
    max-width: 190px;
    background-color: gray;
    float: right;
}

基本上，您将左侧的 header 元素浮动到左侧，将右侧的元素浮动到右侧，并保持 logo 元素在正常的框流中居中。

设置min-width以允许固定带有徽标/横幅图像。

小提琴参考：http: //jsfiddle.net/audetwebdesign/Esst8/

于 2013-03-27T18:03:26.023 回答
1

在这种情况下，如果 409px 超过总宽度的 34% 会发生什么？它打破了。

考虑重写你的html，它不会这样工作。

于 2013-03-27T17:35:36.680 回答
1

重组和使用Float

为了得到你想要的，最好的办法是重构你的 HTML 并确保你min-width在body. 像这样的东西（如this fiddle所示）：

HTML

<div id="header">
        <div class="header-left">LEFT</div>
      <div class="header-right">RIGHT</div>
        <div class="logo"><img src="images/logo" width="409" height="138" /></div>
</div>

基本 CSS

body {
    min-width: 600px; /* some minimum greater than 409px */
}

.header-left {
    float: left;
    width: 50%;
    margin-right: -204.5px;
    border-right: 204.5px solid transprent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.logo {
    width:409px; /* width of the logo */
    margin:10px auto 0 auto;
    position: relative;
    z-index: 1;
}
.header-right {
    float: right;
    width: 50%;
    margin-left: -204.5px;
    border-left: 204.5px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

更新：要让它“在中心”运行，您必须考虑设置中较大的两个侧面部分min-width。因此，如果您在每一侧放置一些固定宽度的元素，那么您需要min-width通过以下公式根据这两个侧元素中的较大者计算您的：

（（较大的边片 px）x 2）+ 409px 徽标 = 最小宽度

不要忘记在调整大小时根据需要考虑边界等。

于 2013-03-27T17:53:08.063 回答
0 
#header{ width:100%}
.header-left {
    width:33%;
    float:left;
}
.logo {
    width:34%; /* width of the logo */
    margin:10px 0px 0px;
    float:left; height:138px;
}
.header-right {
    width:33%;
    float:left;
}
.clr{ clear:both;}

HTML：

<div id="header">
     <div class="header-left">LEFT</div>
     <div class="header-right">RIGHT</div>
     <div class="logo"><img src="images/logo" width="409" height="138" /></div>
     <div class="clr"></div>
</div>
于 2013-03-27T19:26:56.017 回答
0

使用display: inline而不是display: inline-block你的 div

演示：http: //jsfiddle.net/R65fA/1/

我刚刚阅读了@Milche Patern 的答案，并注意到您对子元素同时使用百分比和固定宽度。这真是个坏主意。你最好重写以使其成为标准。

于 2013-03-27T17:28:57.667 回答