英文:
Using HTML & CSS to create 6 icons (2 and 2 in rows) with text that fall in two lines next to it
问题
我试图创建6个图标，其侧面有分为两行的文本。每个图标应该是每行2个，然后进入下一行。请参见这张图片：https://i.stack.imgur.com/4hmOA.jpg
我初步的代码尝试如下，随后在文本上使用了display: inline-block CSS。
我的问题是：
- 让右侧的文本分为两行显示，同时与左侧的图标保持内联。
- 创建多个图标，每次两个一行。
以下是您提供的HTML代码片段，已翻译为中文：
<div class="section">
<img src="/uploads/2023/02/Aargang.svg" class="ikon1" alt="测试">
<div class="ikontext">
年份<br>
<strong>2011</strong>
</div>
</div>
英文:
I am trying to create 6 icons that have text on the side that falls in two lines. Each icon should be 2 in a line before going on to the next row. See this image: https://i.stack.imgur.com/4hmOA.jpg
My initial code attempt below which was followed up with a display: inline-block CSS on the text.
My issues are:
- Getting the text on the right side to appear in two lines while remaining inline with the icon on the left
- Creating multiple icons where two fall in a row at a time
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div class="section">
<img src="/uploads/2023/02/Aargang.svg" class="ikon1" alt="Test">
<div class="ikontext">
Year<br>
<strong>2011</strong>
</div>
</div>
<!-- end snippet -->
答案1
得分: 1
以下是使用flex的示例。
.container {
display: flex;
width: 320px;
flex-wrap: wrap; // 这确保了在空间不足时将项目移到下一行
}
.item {
display: flex;
margin-bottom: 20px;
flex-basis: 50%; // 这确保每行有两个项目
}
.icon {
width: 40px;
height: 40px;
background-color: grey;
}
.text {
margin-left: 10px;
}
.text-bottom {
font-weight: bold;
}
<div class="container">
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class "text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
</div>
英文:
An example using flex.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
width: 320px;
flex-wrap: wrap; // this makes sure items are dropped to the next row when they are out of space
}
.item {
display: flex;
margin-bottom: 20px;
flex-basis: 50%; // this makes sure there are two items per row
}
.icon {
width: 40px;
height: 40px;
background-color: grey;
}
.text {
margin-left: 10px;
}
.text-bottom {
font-weight: bold;
}
<!-- language: lang-html -->
<div class="container">
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<div class="text-top">text top</div>
<div class="text-bottom">text bottom</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论