html - 如何用 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;
}
上面的代码导致了这个
解决方案
你期待这样吗:
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>
推荐阅读
- powershell - 为什么 Powershell 不能正确处理带有美元符号和问号的字符串?
- python - 根据python和pandas中的标准转换复杂的字符串
- c# - 从 C# 调用带有 FAR * 参数的 C/C++ DLL 函数
- java - 如何在返回语句运行之前等待异步方法完成?
- c# - 使用 linq c# 如何使用条件选择两个不同的列表
- rename - 重命名多个目录中的大量文件
- typescript - 如何正确键入重载函数
- php - mysqli bind_result 并获取到 PDO PostgreSQL
- flutter - 为什么 Flutter Navigator 2.0 示例中没有返回按钮?
- telegram - 如何使用 Telegram API sendGame 方法发送回调数据