英文:
How to wrap the middle div down
问题
以下是代码的部分翻译：
<!DOCTYPE html>
<html>
<head>
<style>
#mainCont
{
background-color: lightblue;
display: flex;
justify-content: space-between;
}
#middleCont
{
background-color: lavender;
}
#middleCont a
{
padding: 0 80px;
}
</style>
</head>
<body>
<div id="mainCont">
<div>Word</div>
<div id="middleCont">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</div>
<div>Word</div>
</div>
</body>
</html>
图片中解释的预期结果。
英文:
The code below have three divs that expected to be responsive based on how the user resize the window.
when the window is too small, i want the middle div to wrap down like the picture explain.
<!DOCTYPE html>
<html>
<head>
<style>
#mainCont
{
background-color: lightblue;
display: flex;
justify-content: space-between;
}#middleCont
{
background-color: lavender;
}#middleCont a
{
padding: 0 80px;
}
</style>
</head>
<body>
<div id="mainCont">
<div>Word</div>
<div id="middleCont">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</div>
<div>Word</div>
</div>
</body>
</html>
(https://i.stack.imgur.com/VN02X.jpg)
Thanks
The expected result explained in the picture
答案1
得分: 1
> 使用 order CSS 属性，我们可以根据屏幕大小更改元素的顺序，并使用 flex-wrap 来创建另一行
DOC
>
> 最佳做法是使用类名选择器而不是 ID 选择器
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainCont
{
background-color: lightblue;
display: flex;
justify-content: space-between;
}
.middleCont
{
background-color: lavender;
}
.middleCont a
{
padding: 0 80px;
}
@media (max-width: 575.98px){
.mainCont{
flex-wrap:wrap;
}
.middleCont{
order:3
}
}
<!-- language: lang-html -->
<div class="mainCont">
<div>Word</div>
<div class="middleCont">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</div>
<div>Word</div>
</div>
<!-- end snippet -->
英文:
> Using order css property we can change the order of elements based on screen size and use flex-wrap to make another row
DOC
>
> It is best practice to use class name selector instead of id selector
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.mainCont
{
background-color: lightblue;
display: flex;
justify-content: space-between;
}
.middleCont
{
background-color: lavender;
}
.middleCont a
{
padding: 0 80px;
}
@media (max-width: 575.98px){
.mainCont{
flex-wrap:wrap;
}
.middleCont{
order:3
}
}
<!-- language: lang-html -->
<div class="mainCont">
<div>Word</div>
<div class="middleCont">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</div>
<div>Word</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论