Question

如下图所示，我的响应代码有问题：我有3个部分叫做square1,2和3，里面有一个白色的div。它上面的文字和一个绝对位置的图标。一切都很好，从920px到更高的浏览量。现在，从720到940像素，我试图给这3个元素增加50％的宽度，在顶部显示两个，在底部显示1个，但是居中。到目前为止是一团糟。有人可以解释一下我做错了什么吗？我的实际DEMO

HTML：

<div id="section2">

        <div id="centralize2">
            <div id="square1">
                <div id="white1">
                    <img src="images/hexagon1.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur1</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>
            </div>

            <div id="square2">
                <div id="white1">
                    <img src="images/hexagon2.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur2</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>

            </div>
            <div id="square3">

                <div id="white1">
                    <img src="images/hexagon3.png" class="hexagon" />
                    <h2 class="title1">Ipsum Dolor Consectetur3</h2>
                    <h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
                </div>
            </div>
        </div>

    </div>

谢谢！

Answer 1

您可以使用flexbox来达到您想要的效果。如果没有必要，请勿使用绝对定位。如果宽度大于940px，则div将彼此相邻显示。在完整版的代码段中试一试。

还清理了一些代码，因为你不能有多个具有相同id的div。这不是有效的标记。请改用class。

#section2 {
	position: relative;
	background-color: #112e4c;
	overflow: hidden;
}

#square1, #square2, #square3 {
	margin-top: 59px;
}

.white1 {
  margin: 20px;
	background-color: #fff;
	text-align: center;
}

.hexagon {
	position: absolute;
	left: 50%;
}

.title1 {
	font-size:18px;
	margin-top: 90px;
	font-family: 'Ubuntu', sans-serif;
	color: #112e4c;
	font-weight: 600;
}
.description2 {
	font-size: 14px;
	line-height: 16px;
	margin-top:20px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	color: #8da0b4;
	
}

@media all and (min-width:720px) {
  
  #centralize2 {
    display: flex;
    flex-flow: row wrap;
  }

  #square1, #square2, #square3 {
	  flex-basis: calc(50%);
  }
  
}


@media all and (min-width:940px) {
  
  #square1, #square2, #square3 {
	  flex-basis: calc(100%/3);
  }
  
}

<body>
<div id="section2">
		
			
      <div id="centralize2">
				<div id="square1">
					<div class="white1">
						<h2 class="title1">Ipsum Dolor Consectetur1</h2>
						<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
					</div>
				</div>
				
				<div id="square2">
					<div class="white1">
						<h2 class="title1">Ipsum Dolor Consectetur2</h2>
						<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
					</div>
					
				</div>
				<div id="square3">
					
					<div class="white1">
						<h2 class="title1">Ipsum Dolor Consectetur3</h2>
						<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
					</div>
				</div>
			</div>
		
		</div>

</body>

Answer 2

这与你的绝对定位有关。尝试删除绝对定位，然后尝试向左浮动块并根据需要添加边距。在工作环境中，我们将尽力为您提供一个有效的演示。

有机会尝试编辑您的演示，我相信您正在寻找类似这样的内容https://jsfiddle.net/ah5zz8qq/

#section2 {
	width: 100%;
	background-color: #112e4c;
	overflow: hidden;
}

#centralize2 {
  width: 880px;
  height: 310px;
  margin: 40px auto;
  text-align: center;
}

#square1 {
  display: block;
	float: left;
	width: 33.3%;
  position: relative;
}

#square2 {
  display: block;
	float: left;
	width: 33.3%;
	position: relative;
}

#square3 {
  display: block;
	float: left;
	width: 33.3%;
  position: relative;
}

#white1 {
	width: 280px;
	height: 250px;
	background-color: #fff;
	text-align: center;
  position: relative;
}

.hexagon {
	position: absolute;
	left: 50%;
  top: 0;
	margin-left: -52px;
	margin-top: -59px;
}

.title1 {
  display: block;
	font-size:18px;
	font-family: 'Ubuntu', sans-serif;
	color: #112e4c;
	font-weight: 600;
}
.description2 {
	font-size: 14px;
	line-height: 16px;
	margin-top:20px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
	color: #8da0b4;
}


@media all and (max-width:940px) {
  
#centralize2 {
	width: 90%;
} 

#section2 {
	height: 720px;
}

#square1 {
  display: block;
	width: 50%;
	float: left;
}

#square2 {
  display: block;
	width: 50%;
	float: left;
  margin-bottom: 10px;
}

#square3 {
  display: block;
  clear: both;
	width: 50%;
	float: none;
  margin: 0 auto;
}

#white1 {
	width:300px;
}



}

@media all and (max-width:720px) {
  
#section2 {
	height: 1070px;
}

#buttons {
	margin-top:25px;
}

#square1 {
	width: 100%;
}

#square2 {
	width: 100%;
	margin-top:340px;
}

#square3 {
	width: 100%;
	margin-top:340px;
}

#white1 {
	width: 100%;
	position: absolute;
	
} 
}
}

使用响应式浏览器将Divs居中

2 个答案: