两大列都是水平的和垂直的
两大列都是水平的和垂直的
提问于 2017-09-29 06:19:44
创建下面的布局的最佳方法是什么？(回应)
我尝试将所有的东西分割成几个部分，并使用transform属性，但是，我在将它应用到左侧各自右侧的框时遇到了一些问题。不过，我不确定这个布局是否是最好的布局，它是否适用于大多数手机、计算机等。
你们怎么解决这个问题？
布局(电脑)：
响应式布局(电话)：
到目前为止，我的脚本是这样的，并不是最好的：
.page-4 {
width: 100vw;
background-color: #ffd9d2;
z-index:3;
min-height: 100vh;
}
.page-4 .box {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.page-4 .box .group {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left {
float: left;
max-width: 50%;
}
.right {
float: right;
max-width: 50%;
}
.group:after {
content:"";
display: table;
clear: both;
}<div class="page-4">
<div class="box">
<div class="group">
<div class="left">
<div class="page-4-heading">TEXT1</div>
</div>
<div class="right">
<div class="page-4-text">TEXT2</div>
</div>
</div>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-29 06:35:25
使用Flexbox怎么样？
* { box-sizing: border-box; }
.wrap {
display: flex;
flex-flow: row wrap;
}
.wrap > .item {
border:solid 3px black;
padding: 10px;
width: 50%;
}
@media (max-width: 600px) {
.wrap > .item {
width: 100%;
}
}<div class="wrap">
<section class="item">1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</section>
<section class="item">2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</section>
</div>
Stack Overflow用户
发布于 2017-09-29 06:28:32
.page-4{
width: 100vw;
min-height: 100vh;
}
.page-4 .box{
width: 100%;
height: 100%;
}
.page-4 .box .group{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.left, .right{
width: 720px;
height: 300px;
border: 2px solid black;
padding: 20px;
}<div class="page-4">
<div class="box">
<div class="group">
<div class="left">
<div class="page-4-heading"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora hic voluptatum qui, consectetur harum exercitationem. Mollitia, at nesciunt cumque veritatis quia temporibus ex necessitatibus, voluptas suscipit explicabo ab, quos blanditiis.</div></div>
</div>
<div class="right">
<div class="page-4-text"><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quam, illum, dicta repudiandae ab quisquam dolore fuga nihil perferendis nesciunt vitae reprehenderit blanditiis porro esse? Vel rem eligendi numquam accusamus!</div></div>
</div>
</div>
</div>
</div>
使用display: flex怎么样？
第二个建议是
@media screen and (max-width: 400px) {
/* Mobile */
}
@media screen and (min-width: 401px) {
/* Desktop */
}Stack Overflow用户
发布于 2017-09-29 06:35:38
.page1,.page2{
width:50%;
height:300px;
background:grey;
padding:10px;
border:3px solid black;
}
.content{
border:1px solid black;
background:grey;
}
@media (max-width:767px){
.page1,.page2{
width:100%;
}
}<div class='page1'><div class="content"> some text</div> </div>
<div class='page2'><div class="content">another text </div></div>
查询请评论
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46482823
复制相关文章
相似问题
腾讯云开发者
