如何使用 flexbox 与 html 和 css
[英]How to use the flexbox with html and css
问题描述
I am trying to add heading H1 and text under the headings and the a link when you click the box.
当您单击框时，我正在尝试在标题和link下添加标题H1和文本。
The picture shows an example of what I mean:图片显示了我的意思的一个例子：
Here is my current code这是我当前的代码
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Heading 1</div>
<div>Heading 2</div>
<div>Heading 3</div>
</div>
How can I make the whole box clickable and add the smaller text like shown in the image above?如何使整个框可点击并添加如上图所示的较小文本？
3 个解决方案
解决方案1
2 已采纳 2020-06-26 23:08:29
For heading, you can use h1 element , and add another element for the sub text under it.对于标题，您可以使用h1 元素，并为其下方的子文本添加另一个元素。 Finally you can wrap both with the anchor tag.最后，您可以使用锚标记包装两者。
.flex-container { display: flex; background-color: DodgerBlue; }.flex-container > a { background-color: #f1f1f1; margin: 10px; padding: 20px; color: #000; text-decoration: none; }.flex-container h1 { font-size: 20px; }
<div class="flex-container"> <a href="#"><h1>Heading 1</h1><div>Sub text 1</div></a> <a href="#"><h1>Heading 2</h1><div>Sub text 2</div></a> <a href="#"><h1>Heading 3</h1><div>Sub text 3</div></a> </div>
解决方案2
1 2020-07-01 14:44:16
Instead of using justify-content property, we can use flex property with default value be 1 which can took the width automatically horizontally evenly without any extra-space in left side.代替使用justify-content属性，我们可以使用默认值为1的flex属性，它可以自动将宽度水平均匀地取走，而左侧没有任何多余的空间。 Find the working code below:找到下面的工作代码：
.flex-container { display: flex; background-color: #e2e2e2; color: white; }.flex-container a { flex: 1; background-color: #ec4141; margin: 10px; padding: 10px; color: #000; text-decoration: none; }.flex-container h1 { color: white; font-size: 18px; }.flex-container div { color: white; font-size: 10px; }
<div class="flex-container"> <a href="#"> <h1>Heading 1</h1> <div>Sub text 1 Sub text 1 Sub text 1 Sub text 1 Sub text 1 Sub text 1 Sub text 1</div> </a> <a href="#"> <h1>Heading 2</h1> <div>Sub text 2 Sub text 2 Sub text 2 Sub text 2 Sub text 2 Sub text 2</div> </a> <a href="#"> <h1>Heading 3</h1> <div>Sub text 3 Sub text 3 Sub text 3</div> </a> </div>
解决方案3
0 2020-06-26 23:18:28
How can I make the whole box clickable > Put an tag around it Smaller text: Add another element and customize it as you wish如何使整个框可点击>在其周围放置标签较小的文本：添加另一个元素并根据需要自定义它
I've also added justify-content: space-around in flex container for you.我还为您在 flex 容器中添加了justify-content: space-around 。 End result is the same as the screenshot in your question.最终结果与您问题中的屏幕截图相同。
<head> <style>.flex-container { display: flex; background-color: DodgerBlue; justify-content: space-around; }.flex-element { display: block; background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } </style> </head> <body> <div class="flex-container"> <a class="flex-element" href="#"><div>Heading 1 <p>I am a little text </p></div></a> <a class="flex-element" href="#"> <div>Heading 2 <p>I am a little text </p></div></a> <a class="flex-element" href="#"> <div>Heading 3 <p>I am a little text </p></div> </a> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.