首页新闻找找看学习计划

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;
}

小白萝卜呀的主页 小白萝卜呀 | 初学一级 | 园豆:3
提问于:2019-12-25 10:40
< >
分享
最佳答案
1

最好发一个完整的可运行的demo上来,别发图片,否则别人想试试还得自己敲代码。

奖励园豆:5
会长 | 大侠五级 |园豆:6782 | 2019-12-25 10:44

好的 我发出来了

小白萝卜呀 | 园豆:3 (初学一级) | 2019-12-25 10:45

@小白萝卜呀: 这就是你发的完整的?我帮你整理下吧:

<!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>
会长 | 园豆:6782 (大侠五级) | 2019-12-25 11:23

@会长: 谢谢,我改好了

小白萝卜呀 | 园豆:3 (初学一级) | 2019-12-25 12:25
其他回答(3)
0

加上这个就可以换行了

flex-wrap: wrap
学会乐观 | 园豆:728 (小虾三级) | 2019-12-25 15:59
0

flex-wrap属性可以控制是否换行

wings-lhw | 园豆:346 (菜鸟二级) | 2019-12-25 17:13
0

以为还有人写flex,纯属路过~~

花飘水流兮 | 园豆:10746 (专家六级) | 2019-12-27 02:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册