html css layout zoom zoom changestic

时间：2017-04-26 17:15:12

标签： html css layout

我有一些关于html css的问题

我想要实现的布局如下图1所示

example1

但是，如果它放大了几个百分比，它就像下面的图片2 example2

我想要的是，它像任何缩放中的图片1一样稳定

这是代码

＆＃13;
＆＃13; 
body {
  background-color: #430600;
  width: 1280px;
  margin: 0 auto;
  align-content: center;
  padding: 0;
}

header {
  position: fixed;
  width: 100%;
  z-index: 15;
}

main {
  float: left;
  margin-top: 120px;
}

h1 {
  color: white;
  text-align: center;
  font-style: italic;
  z-index: 10;
}


h2 {
  color: white;
  text-align: center;
}

#section-banner {
  
}

#section-banner h2 {
  position: absolute;
  text-align: center;
  top: 300px;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  color: white;
  font-size: 5em;
  font-style: italic;
  z-index: 1;
}

#section-aboutus-1 {
  color: white;
  margin-top: 50px;
  text-align: center;
}

#aboutus-1 {
  float:left;
}

#aboutus-table {
  float:left;
}

#aboutus-image-1 {
  float:left;
  width: 50%;
}

#aboutus-detail-1 {
  float: right;
  width: 45%;
  text-align: center;
  font-size: 1.4em;
  margin: 50px 20px 50px 20px;
  display: inline-block;
}

#aboutus-detail-2 {
  float:left;
  width: 45%;
  text-align: center;
  font-size: 1.4em;
  margin: 75px 20px 50px 20px;
  display: inline-block;
}

#aboutus-image-2 {
  float:right;
  width: 49%;
}

#aboutus-detail-3 {
  margin: 50px 150px 50px 150px;
  float:left;
}
＆＃13; 
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">		
	<link rel='stylesheet' href='index.css?ver=1.0' media='all' />
  
</head>

<body>
		<section id="section-aboutus-1">
      <div id="aboutus-image-1">
        <img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" />
      </div>
      <div id="aboutus-detail-1">        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>


      <div id="aboutus-detail-2">
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>
      <div id="aboutus-image-2">
        <img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" />
      </div>


      <div id="aboutus-detail-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
				<br><br>
				Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
				<br><br>
				Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
				<br><br>
				In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl. 
      </div>
      
    </section>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

任何帮助表示赞赏

2 个答案:

答案 0 :(得分：1)

首先，您应该改进此HTML代码，分隔块。

你应该把＃aboutus-detail-1和＃aboutus-image-1放在一个separeted div和CSS中你说：

float: left;
width: 100%;

这两个新的div。

其他人#aboutus

也一样

答案 1 :(得分：0)

您是否有兴趣使用像bootstrap这样的响应式框架？ https://jsfiddle.net/audetcameron/ggdz2Lnj/只是一个简单的例子

<body style="background:#430600; color:#ffffff">
     <div class="container">
      <div class="row">
       <div class="col-xs-6">
           <div id="aboutus-image-1">
            <img src="https://i.stack.imgur.com/jDg7r.jpg" alt="" class="img-responsive"/>
          </div>
       </div>
       <div class="col-xs-6">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
    Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
    Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 

    In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>
       </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lectus tincidunt, sollicitudin odio vitae, pretium odio. 
    Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
    Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
    In hac habitasse platea dictumst. Nulla finibus nulla ut auctor dapibus. Duis ultricies erat sagittis metus gravida, accumsan laoreet libero tempus. In at semper nisl.</p>      
        </div>
        <div class="col-xs-6">
             <div id="aboutus-image-2">
            <img class="image" src="https://i.stack.imgur.com/6EScx.jpg" alt="" class="img-responsive"/>
          </div>  
        </div>
      </div>
    </div> 
    </body>
相关问题
最新问题