对齐HTML项目

我有一个包含3个div的div。对齐HTML项目

HTML代码

.state { 
 
    background-color: rgba(233, 234, 237, 0.9); 
 
    height: 7vh; 
 
    width: 80%; 
 
    border-radius: 14px; 
 
    margin: 10px 0 15px 80px; 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 

 
.state-main { 
 
    text-align: center; 
 
    padding-top: 10px; 
 
    font-weight: 900; 
 
    font-size: 14px; 
 
} 
 

 
.options { 
 
    text-align: right; 
 
    margin-bottom: 10px; 
 
} 
 

 
.owner-image { 
 
    border-top-left-radius: 14px; 
 
    border-bottom-left-radius: 14px; 
 
}

<div class="state"> 
 

 
    <div class="owner"> 
 
    <img class="owner-image" src="img/uk.jpg"> 
 
    </div> 
 
    <div class="state-main"> 
 
    <p class="state-name">PENNSYLVANIA</p> 
 
    </div> 
 
    <div class="options"> 
 
    <p id="time"></p> 
 
    <button>SEND TROOPS</button> 
 
    <button>ATTACK</button> 
 
    </div> 
 

 
</div>

来源

2017-06-06 urosv

请张贴您的HTML。你可以使用''图标在这里嵌入生动的例子 –

检查这个帖子：https://stackoverflow.com/questions/2156712/how-to-float-3-divs-side-by-side-using-css这是这个你想成就什么？尝试添加margin-right： –

：auto;和margin-left：auto;到你的3个div。 – AMH

使用flexbox（browser support）。

.state { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    min-height: 80px; 
 
    background-color: lightgray; 
 
} 
 

 
.state, 
 
.btns button { 
 
    text-transform: uppercase; 
 
}

<div class="state"> 
 
    <img src="http://placehold.it/150x80/fc0"> 
 
    <p> 
 
    Pennsylvania 
 
    </p> 
 
    <div class="btns"> 
 
    <button>Send Troops</button> 
 
    <button>Attack</button> 
 
    </div> 
 
</div>

**对于IE9及以上，您需要提供一个备用的。是否需要这样做取决于目标受众。

来源

2017-06-06 17:49:54 hungerstar

Flexbox仅适用于CSS3。 –

而且？ [** Flexbox支持**]（http://caniuse.com/#feat=flexbox）。 OP没有提到限制，所以...... – hungerstar

而且 - 对于企业可以控制允许的浏览器的Intranet应用程序，这可能是一个不错的选择。但是如果你希望你的面向公众的网站能够很好地展现出来，不管他们是否拥有最新的浏览器，使用CSS3依赖的方案并不是一个好主意。 –

.State是包含所有的div。3.state-main是黄色的div，应该在中心。。选项是绿色的div应该走得很远。 .owner-image是红色的div，应该保持在同一个地方。

使用flex将布局放置到位。

.state { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.state-mail { 
 
    text-align: center; 
 
}

<div class="state"> 
 
    <div class="owner-image"> 
 
    <img src="http://placehold.it/100x50" /> 
 
    </div> 
 
    <div class="state-main">PENNSYLVANIA</div> 
 
    <div class="options"><button>SEND TROOPS</button><button>ATTACK</button></div> 
 
</div>

来源

2017-06-06 17:51:06 Gerard

对齐HTML项目

回答

相关问题