對齊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

回答

相關問題