如何使用CSS創建此（表）

Question

我想使用CSS創建此設計。 在較小的屏幕上，紅色文本/區域（響應）應該是響應/靈活的。

我要使用CSS創建的設計：

我可以使用html-table來簡化它，但是在設計中不應該使用表。

我查看了無序列表，並隱藏了項目符號，並替換為圖像，但是內容和響應區域之間的規范存在問題。

這是一些代碼，但是當我在facebook和twitter按鈕的右側添加文本時，我無法正常工作。

<div id="fact-footer">
<img id="img-fb" src="img/fb.svg" alt="Facebook">
<img id="img-fb" src="img/tw.svg" alt="Facebook">
<a id="more-facts" href="#">NÄSTA ></a>
</div>


#fact-footer {
bottom: 0;
font-size: 12px;
}

#img-fb, #img-twitter {
float: left;    
width: 35px;
height: 35px;
}

#img-fb {
margin-right: 10px;
}

#more-facts {
float: right;
font-size: 14px;
padding: 8px;
border: none;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
cursor: pointer;
background-color: #26a69a;
color: white;
}

代碼原本導致

Answer 1

您是否期望這樣：

 body{ margin:10px; } .flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-items: stretch; align-items: stretch; } span{ color:black; } .flex-item:nth-of-type(5) { flex-grow: 1; } .flex-item { background: #e0e0e0; color: white; padding:6px; font-weight: bold; font-size: 1em; text-align: center; } .btn{ background-color: #5fda64; /* Green */ border: none; color: white; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius:5px; cursor: pointer; } 

 <script src="https://use.fontawesome.com/ecdc7512a9.js"></script> <ul class="flex-container"> <li class="flex-item"> <i style="color:blue" class="fa fa-facebook fa-3x"></i> </li> <li class="flex-item" > <span > facebook <br/> Account </span> </li> <li class="flex-item"><i style="color:lightblue" class="fa fa-twitter fa-3x"></i> </li> <li class="flex-item"> <span>Twitter <br/> Account </span> </li> <li class="flex-item">(responsive)</li> <li class="flex-item"> <button class="btn">NASTA ></button> </li> </ul> 

Answer 2

使用flex您可以使用它

<div class="row">
  <div class="col-sm-3"> facebook image here </div>
  <div class="col-sm-3"> twiter image here </div>
  <div class="col-sm-3"> text </div>
  <div class="col-sm-3"> nasta image here </div>
</div>

.row {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.col-sm-3 {
  width: 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  box-sizing: border-box;
}

給.col-sm-3一個邊框，看看會發生什么（並且您在使用Bootstap而不使用完整的軟件包）。

Answer 3

使用bootstrap https://getbootstrap.com/

您可以使用四行一列

<div class="row">

<div class="col-sm-3"> facebook image here </div>
    <div class="col-sm-3"> twiter image here </div>
    <div class="col-sm-3"> text </div>
    <div class="col-sm-3"> nasta image here </div>
</div>