使用HTML / CSS并排放置横幅？

Question

如何使用HTML / CSS并排放置横幅？理想情况下，如下所示具有不同的尺寸？

Answer 1

要么使用一些网格系统，要么使用裸CSS浮动属性，伪示例如下所示：

.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>

祝你好运

Answer 2

一种简单的方法是显示横幅DATETIME(201701011730)--> DATE(20170101) and TIME(1730) ，并为其指定所需的宽度。

inline-block

.banner {
    display: inline-block;
}

.banner-sm {
  width: 32%;
}

.banner-lg {
  width: 65%;
}

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

Answer 3

如果您熟悉if(data instanceOf JsonObject){ YourModelForData object = YourDataComponentForObject(data); // Do anything with Object } else { List<YourModelForData> array = YourDataComponentForArray(data); // Do anything with array } public YourModelForData YourDataComponentForObject(JsonElement data) { Type type = new TypeToken<YourModelForData>() { }.getType(); YourModelForData item = new Gson().fromJson(data, type); } public List<YourModelForData> YourDataComponentForArray(JsonElement data) { Type type = new TypeToken<List<YourModelForData>>() { }.getType(); List<YourModelForData> items = new Gson().fromJson(data, type); } ，请使用其网格系统，否则使用twitter-bootstrap将对您有帮助。

inline-block

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

Answer 4

您可以使用Twitter Bootstrap获取网格系统和其他有用的布局功能：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以使用 CSS3 flex-box 概念

.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{
	height:100%;
    background:white;
    box-sizing:border-box;
}
.one{
width:75%;
border:1px solid green;
}
.two{
	width:25%;
    border:1px solid red;
}
.subb{
width:33%;
background:white;
height:100%;
}

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

Answer 6

您可以使用Bootstrap执行此操作。

  

Bootstarp是一个强大的css框架，可以支持Web开发人员   做这些事情（划分屏幕等）。

Bootstrap非常容易学习和实施。

您可以开始学习Bootstrap here