Question

下面创建布局的最佳方法是什么？（响应）

我试图将所有内容拆分成部分并使用transform属性，但是，我在将其应用于左侧各自右侧的框时遇到了一些问题。我不确定这个布局是否是最好的，如果它适用于大多数手机，电脑等。

你们怎么解决这个问题？

布局（计算机）：

响应式布局（电话）：

这是我的脚本到目前为止的样子，而不是最好的：

＆＃13;

appObj.get('logger')

＆＃13;

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

＆＃13;

Answer 1

使用class MyJob{ static triggers = { // fire every day at 12:30 cron name: 'myJobCron', cronExpression: "0 30 12 * * ?" } def myService def execute( context ) { myService.doStuff() } }

怎么样？

Here is fiddle where you can resize the visible area and see it change

＆＃13;

Flexbox

＆＃13;

* { 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%;
    }
}

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用display: flex？

第二个建议是

@media screen and (max-width: 400px) {
  /* Mobile */
}
@media screen and (min-width: 401px) {
 /* Desktop */
}

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

如有任何疑问，请发表评论

两个水平和垂直居中的大柱

3 个答案: