如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]
Posted
技术标签:
【中文标题】如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]【英文标题】:How to achieve this design by html and css with flex property or something else [closed] 【发布时间】:2021-08-15 12:18:51 【问题描述】:我想制作待办事项列表,并为每个任务添加 div。所以我有两个跨度标签和两个按钮,但我不知道如何实现这一点。我认为 flex 属性会有所帮助,我尝试过但无法实现
你能推荐任何关于 flex 属性的详细视频吗?
【问题讨论】:
到目前为止您尝试过什么,效果如何? 蓝色 div,显示:flex;宽度:100%;第一跨宽:10%;第二跨宽:70%;按钮宽度:10%; 【参考方案1】:此代码可能对您有用。
nav
display: flex;
.box-1
background-color: green;
.box-2
background-color: red;
flex-grow: 1;
<nav>
<span class="box-1">Your Logo Text</span>
<span class="box-2"></span>
<button>Button 1</button>
<button>Button 2</button>
</nav>
【讨论】:
【参考方案2】:https://jsfiddle.net/ws23hb46/
<div class="container">
<div>
xxx
</div>
<div class="foo">
aaaaaaaaaaaaaaaaaaaaaa
</div>
<div>
<button>
a
</button>
</div>
<div>
<button>
b
</button>
</div>
</div>
css:
.container
width: 100%;
display: flex; // direction is row by default
justify-content:space-between;
.container > div
padding:1em;
margin:1em;
background-color:grey;
.foo
flex:1 0 100%; // 1 = take the remaining space (same as flex-grow:1;)
【讨论】:
【参考方案3】:这是你的 btn 代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.div1
display: flex;
justify-content: space-between;
padding: 20px;
</style>
</head>
<body>
<div class="div1">
<div style="width:20%";>
<span>some text</span>
</div>
<div style="width:40%";>
<span>some larger text column</span>
</div>
<div>
<button type="button" class="btn btn-success">Button</button>
<button type="button"class="btn btn-danger">Button</button> </div>
</div>
</body>
</html>
【讨论】:
以上是关于如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章