如何使用CSS3創建以下樣式？

現在，我有最簡單的事情，用下面的代碼中間方：

HTML（漂亮無關，但我猜標籤並不需要是一個div標籤）：

<div id="divBorder"> 
</div>

CSS：

#divBorder{ 
    border-style: solid; 
    border-width: 1px; 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    z-index: 15; 
    top: 50%; 
    left: 50%; 
    margin: -110px 0 0 -160px; 
}

所以，我只是基本上居中在屏幕中心的中間廣場，就是這樣，我找不到一個方法來完成另一個兩半的廣場。

我希望你能幫助我，非常感謝你提前！

來源

2017-03-29 edusola93

使用flexbox可以使用以下標記實現所需的佈局。

body { 
 
    margin: 0; 
 
} 
 

 
main { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
header { 
 
    flex: 1; 
 
    background-color: mediumspringgreen; 
 
} 
 

 
div { 
 
    flex: 4; 
 
    display: flex; 
 
    background-color: darkviolet; 
 
} 
 

 
section { 
 
    flex: 1; 
 
} 
 

 
section:nth-child(even) { 
 
    flex: 2; 
 
    background-color: darkorchid; 
 
} 
 

 
footer { 
 
    flex: 1; 
 
    background-color: deeppink; 
 
}

<main> 
 
    <header></header> 
 
    <div> 
 
    <section></section> 
 
    <section></section> 
 
    <section></section> 
 
    </div> 
 
    <footer></footer> 
 
</main>

來源

2017-03-29 18:19:41 Ricky

.inner { 
 
border:solid; 
 

 

 
} 
 

 
.outer {display: flex; 
 
flex-direction:row;} 
 

 
.side {width: 25%; height: 50px;} 
 

 
.center {width: 50%; height: 50px}

<div class="outer"> 
 
<div class="side inner"></div> 
 
<div class="center inner"></div> 
 
<div class="side inner"></div> 
 
</div>

您可以使用Flexbox的做到這一點。您可以設置procentage的寬度，也可以用flexbox查看大小。

來源

2017-03-29 18:21:19 Naomi

如何使用CSS3創建以下樣式？

回答

相關問題