使用HTML/CSS並排放置橫幅？

-2

如何使用HTML/CSS並排放置橫幅？理想情況下使用不同的尺寸如下所示？使用HTML/CSS並排放置橫幅？

2017-01-11 DigiMan

12列使用網格，小的花費4列，大單需要8.您可以使用引導電網。你也可以做桌子。 – Justinas

給出固定的寬度和'display：inline-block'？ – nashcheez

我同意@Justinas嘗試使用Bootstrap網格。 –

可以選用一些網格系統，或裸CSS的float屬性，如下圖所示僞例如：

.banner1 { 
 
    float: left; 
 
    width: 100px; 
 
    height: 20px; 
 
    margin: 4px; 
 
    border: 1px solid #777; 
 
} 
 
.banner2 { 
 
    float: left; 
 
    width: 200px; 
 
    height: 20px; 
 
    margin: 4px; 
 
    border: 1px solid #777; 
 
} 
 
.banner3 { 
 
    float: left; 
 
    width: 50px; 
 
    height: 20px; 
 
    margin: 4px; 
 
    border: 1px solid #777; 
 
} 
 
.clearfix { 
 
    clear: both; 
 
}

<div class="banner1">banner</div> 
 
<div class="banner1">banner</div> 
 
<div class="clearfix"></div> 
 
<div class="banner2">banner</div> 
 
<div class="clearfix"></div> 
 
<div class="banner3">banner</div> 
 
<div class="banner3">banner</div> 
 
<div class="banner3">banner</div> 
 
<div class="banner3">banner</div> 
 
<div class="clearfix"></div>

好運

來源

2017-01-11 07:19:54

-1

您可以使用引導來做到這一點。

Bootstarp是一個強大的CSS框架，使Web開發人員的做的東西像這樣的（分屏等等）。

Bootstrap很容易學習和實施。

您就可以開始學習引導here

來源

2017-01-11 07:21:01 Justin

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 –

@AbhishekPandey，這不是一個鏈接唯一的答案。我建議你停止使用你的複製粘貼評論來投票。謝謝 –

Bootstrap不是'Jquery Library'它是一個HTML，CSS和JS框架。 –

一個簡單的方法是，以顯示橫幅inline-block，併爲其分配所需要的寬度。

.banner { 
 
    display: inline-block; 
 
} 
 

 
.banner-sm { 
 
    width: 32%; 
 
} 
 

 
.banner-lg { 
 
    width: 65%; 
 
} 
 

 
.banner { 
 
    height: 100px; 
 
    background: #DDD; 
 
    padding: 0; margin: 0; 
 
}

<div class="row"> 
 
    <div class="banner banner-lg"> </div> 
 
    <div class="banner banner-sm"> </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="banner banner-sm"> </div> 
 
    <div class="banner banner-sm"> </div> 
 
    <div class="banner banner-sm"> </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="banner banner-sm"> </div> 
 
    <div class="banner banner-lg"> </div> 
 
</div>

來源

2017-01-11 07:26:48

如果您熟悉twitter-bootstrap然後利用它的網格系統以其它方式使用inline-block會幫助你。

div { 
 
    border: 1px solid #ddd; 
 
    height: 200px; 
 
    margin: 5px; 
 
    display: inline-block; 
 
    box-sizing:border-box; 
 
}

<section style="width:650px"> 
 
    <div style="width:415px;"></div> 
 
    <div style="width:200px;"></div> 
 
    <div style="width:200px;"></div> 
 
    <div style="width:200px;"></div> 
 
    <div style="width:200px;"></div> 
 
    <div style="width:200px;"></div> 
 
    <div style="width:415px;"></div> 
 
</section>

來源

2017-01-11 07:27:15

您可以使用Twitter Bootstrap得到電網系統和其他有用的佈局功能：

.row div { 
 
    height: 30px; 
 
    background: #aaa; 
 
    border: 1px solid #ddd; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='row'> 
 
    <div class='col-xs-8'></div> 
 
    <div class='col-xs-4'></div> 
 
</div> 
 
<div class='row'> 
 
    <div class='col-xs-4'></div> 
 
    <div class='col-xs-4'></div> 
 
    <div class='col-xs-4'></div> 
 
</div> 
 
<div class='row'> 
 
    <div class='col-xs-4'></div> 
 
    <div class='col-xs-8'></div> 
 
</div> 
 
<div class='row'> 
 
    <div class='col-xs-4'></div> 
 
    <div class='col-xs-8'></div> 
 
    <div class='col-xs-8'></div> 
 
    <div class='col-xs-4'></div> 
 
</div>

來源

2017-01-11 07:36:26 Justinas

可以使用CSS3彈性盒概念

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 400px; 
 
    height: 250px; 
 
    background-color: lightgrey; 
 
    flex-direction:column; 
 
} 
 

 
.flex-item { 
 
    background-color: cornflowerblue; 
 
    width: calc(100% - 20px); 
 
    height: 100px; 
 
    margin: 10px; 
 
    display:flex; 
 
    justify-content:space-between; 
 
} 
 
.sub{ 
 
\t height:100%; 
 
    background:white; 
 
    box-sizing:border-box; 
 
} 
 
.one{ 
 
width:75%; 
 
border:1px solid green; 
 
} 
 
.two{ 
 
\t width:25%; 
 
    border:1px solid red; 
 
} 
 
.subb{ 
 
width:33%; 
 
background:white; 
 
height:100%; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
    \t <div class="sub one">sub 1 </div> 
 
    <div class="sub two">sub 2 </div> 
 
    </div> 
 
    <div class="flex-item"> 
 
    \t <div class="subb s3">sub 3 </div> 
 
    <div class="subb s4">sub 4 </div> 
 
    <div class="subb s5">sub 5 </div> 
 
    </div> 
 
</div>

來源

2017-01-11 07:57:39

使用HTML/CSS並排放置橫幅？

回答

相關問題