flex布局
0
[已解决问题]
解决于 2019-12-28 14:53
多个div变成同一行，屏幕缩小时不换行，请问一下该怎么写呢，第一次使用这个，看过文档了，有点乱
<div class="d1">
<div class="d2">
<div class="c3"><img src="img/logo.png" ></div>
<div class="d5">
<div>智能择校</div>
<div>快速选择学院</div>
<div class="d4"><input type="text" name="" id="" value="" placeholder="正在输入的内容"/><img src="img/imag2/fdj.png" ></div>
<div>
<div>注册</div>
<div>|</div>
<div>登录</div>
</div>
</div>
</div>
</div>
以下是css
.d1{
width: 100%;
border: red solid 1px;
}
.d2{
width: 90%;
border: red solid 1px;
margin: 0 auto;
}
.d2 img{
height: 30px;
width: 100px;
padding: 15px 15px 15px 15px;
border: redb solid 1px;
margin-left: 6%;
}
.c3{
width: 20%;
border: 1px solid red;
text-align: center;
}
.c3 img{
text-align: center;
}
.d4 img{
width: 25px;
height: 25px;
margin-left: 80%;
}
.d4{
height: 0px;
}
.d5{
width: 75%;
border: red solid 1px;
/* text-align: right; */
flex-direction: row;
padding: 20px 20px 20px 20px;
margin: 0 auto;
}
最佳答案
1
最好发一个完整的可运行的demo上来，别发图片，否则别人想试试还得自己敲代码。
奖励园豆：5
好的 我发出来了
@小白萝卜呀: 这就是你发的完整的？我帮你整理下吧：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.d1{
width: 100%;
border: red solid 1px;
}
.d2{
width: 90%;
border: red solid 1px;
margin: 0 auto;
}
.d2 img{
height: 30px;
width: 100px;
padding: 15px 15px 15px 15px;
border: redb solid 1px;
margin-left: 6%;
}
.c3{
width: 20%;
border: 1px solid red;
text-align: center;
}
.c3 img{
text-align: center;
}
.d4 img{
width: 25px;
height: 25px;
margin-left: 80%;
}
.d4{
height: 0px;
}
.d5{
width: 75%;
border: red solid 1px;
/* text-align: right; */
flex-direction: row;
padding: 20px 20px 20px 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="c3"><img src="img/logo.png" ></div>
<div class="d5">
<div>智能择校</div>
<div>快速选择学院</div>
<div class="d4"><input type="text" name="" id="" value="" placeholder="正在输入的内容"/><img src="img/imag2/fdj.png" ></div>
<div>
<div>注册</div>
<div>|</div>
<div>登录</div>
</div>
</div>
</div>
</div>
</body>
</html>@会长: 谢谢，我改好了
其他回答(3)
0
加上这个就可以换行了
flex-wrap: wrap
0
flex-wrap属性可以控制是否换行
0
以为还有人写flex，纯属路过~~
