Html 如何使用CSS创建此（表）

我想用CSS创建这个设计。红色文本/区域（响应）应在较小屏幕上响应/灵活

我想用CSS创建的设计：

我可以用一个html表简单地完成它，但在设计中不应该使用表

我已经查看了无序列表，隐藏了项目符号并替换为图像，但内容和响应区域之间的规格有问题

这里有一些代码，但当我在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;
}

#事实页脚{
底部：0；
字体大小：12px；
}
#img fb，#img twitter{
浮动：左；
宽度：35px；
高度：35px；
}
#img fb{
右边距：10px；
}
#更多事实{
浮动：对；
字体大小：14px；
填充：8px；
边界：无；
边界半径：2px；
盒影：0px 1px 3px rgba（0,0,0,0.3）；
光标：指针；
背景色：#26a69a；
颜色：白色；
}

代码aboe导致了这种情况

使用引导

可以使用一行四列

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

facebook图片在这里
推特图片在这里
正文
纳斯塔图片在这里

您是否希望这样：

正文{
利润率：10px；
}
.柔性容器{
填充：0；
保证金：0；
列表样式：无；
-ms盒方向：水平；
显示：-网络工具包盒；
显示器：-moz盒；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
显示：-ms flexbox；
显示：-moz flex；
显示：-webkit flex；
显示器：flex；
-webkit内容：周围的空间；
证明内容：周围的空间；
-webkit flex流：行换行；
柔性流：行换行；
-webkit对齐项目：拉伸；
对齐项目：拉伸；
}
跨度{
颜色：黑色；
}
.flex项：第n个类型（5）{flex-grow:1；}
.flex项目{
背景：#e0；
颜色：白色；
填充：6px；
字体大小：粗体；
字号：1em；
文本对齐：居中；
}
.btn{
背景色：#5fda64；/*绿色*/
边界：无；
颜色：白色；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
填充：10px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
边界半径：5px；
光标：指针；
}

facebook
帐户


Twitter
账户
（响应性）

纳斯塔>

使用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;
}

facebook图片在这里
推特图片在这里
正文
纳斯塔图片在这里
.行{
宽度：100%；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
框大小：边框框；
}
.col-sm-3{
宽度：25%；
-ms-flex:025%；
弹性：0.25%；
框大小：边框框；
}

---

给

.col-sm-3

一个边框，看看会发生什么（您使用的是Bootstap而不是完整的包）。

您使用的是bootstrap框架吗？如果是的话，这可以很容易地用引导中的网格实现。那么你的代码在哪里呢？我没有使用任何网格framwork@caramba我添加了一些代码，在没有facebook和twitter旁的文本的情况下运行良好。当我添加文本时，我会弄得一团糟。不需要完整的引导。下载引导并查看文件

Bootstrap grid.css

。你要求的所有工作都已经完成了。它是纯css，只是复制/过去，仅此而已。