Question

我想要创建一个html页面，左侧顶部将是一个图像（400x200），在图像下面是一个矩形div（图像宽度相同，高度为50px），图像右侧是另一个矩形作为按钮（图像宽度为50px的高度相同）。在页面的正确大小我想要3个较小的矩形div作为按钮（100x50）（一个旁边一个）。我怎样才能实现这一目标？我想创建两个容器并将图像和2个div放在左边的那个上，其余的3个div放在右边。然而，缺少某些东西，特别是如果分辨率较低或我调整窗口时布置很糟糕。当分辨率较小时，哪种方法更好。该位置应该是左侧容器的绝对值？提前感谢。我创造了这个

＆＃13;

#container1 {width:50%;height:300px;float:left;margin-left:30px;margin-top:20px;}
#container1 a{ text-decoration:none;}

#container2 {width:40%;height:300px;float:right;margin-left:50px;margin-top:50px;}
#container2 a{ text-decoration:none;}
#col1 { float:left; margin:5px;font-size:14pt; border:1px;width:400px;height:200px;border-radius:5px;}

.col2 { float:left;background-color:rgb(17, 83, 151); margin:10px; border:1px ;margin-top:75px;width:155px;height:70px;}
#col3 { position:relative;float:left;background-color:rgb(17, 83, 151); margin:5px;margin-right:5px;font-size:14pt; border:1px ;width:110px;height:200px;border-radius:5px;}
.int {text-align:center;border 1px;font-family:segoe UI;font-size:14pt;color:white;padding-top:5px;margin:15px;}
.int2 {text-align:center;border 1px;font-family:segoe ui;font-size:14pt; color:white;padding-top:50px;margin:3px;}
#col4 {position:absolute;float:left;clear:both;background-color:rgb(17, 83, 151); margin:5px;font-size:14pt; border:1px ;width:400px;height:80px;border-radius:5px;}

.button {padding-top:30px; padding-left:10px; color:white;  font-size:10pt; font-family:Segoe UI; text-decoration:none;}

＆＃13;

<div id="container1">

   <div id="col1" class="col">
		<img id="img" src="http://ima.gs/transparent/400x200.png"">
   </div>
   
   <div id="col3">
	<a href=#"><div class="int2">button 1</div></a>
   </div>
   
   <div id="col4">
		<a href=#"><div class="int">button 2 </div></a>

   </div>
   
  </div> 		

<div id="container2">


	<div class="col2"><a href="#"><div class="button">button 3</div></a>
	
	</div>
	

	
	<div class="col2"><a href="#"><div class="button" style="padding-top:30px;">button 4</div></a>
	</div>
	
	<div class="col2"><a href="#"><div class="button" style="padding-top:30px;">button5</div></a>
	</div>
</div>

＆＃13;

Answer 1

我注意到的第一件事是你是浮动元素并使用边距。切换到填充，就宽度计算而言，这将使您的生活更轻松：

#container1 {width:50%;height:300px;float:left;padding-left:30px;margin-top:20px;}

#container2 {width:50%;height:300px;float:right;padding-left:50px;margin-top:50px;}

只要在你的css中使用border-box，padding会占用容器内部，而不是将其添加到外部。基本上你的容器是50％+ 30px的保证金。我使用插入的30px填充将其更改为50％宽度。现在你可以做简单的数学计算而不是考虑边际。

分区安排

1 个答案: