我怎样才能用 CSS 创建这个 (table)

Question

我想用 CSS 创建这个设计。红色 text/area（响应式）在较小的屏幕上应该是 responsive/flexible。

我想用 CSS 创建的设计：

我可以使用 html-table 来简单地完成，但是 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;
}

代码aboe结果为

Answer 1

使用bootstraphttps://getbootstrap.com/

您可以使用 1 行和 4 列

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

Answer 2

你期待这样吗：

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 3

使用 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 而没有使用完整包）。

我怎样才能用 CSS 创建这个 (table)

How can I create this (table) with CSS

html

css

responsive-design