HTML CSS佈局變焦劇變

我有我想要實現像圖1以下

但是，如果它在幾個百分比放大布局，它變得像下面的圖片2

我要的是，它在任何變焦穩定如畫1

下面是代碼

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

<html> 
 
<head> 
 
\t <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> \t \t 
 
\t <link rel='stylesheet' href='index.css?ver=1.0' media='all' /> 
 
    
 
</head> 
 

 
<body> 
 
\t \t <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. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t 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. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t 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. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Nam tincidunt ornare dolor vitae porttitor. Sed interdum velit sapien, in pharetra velit efficitur sit amet. Aliquam erat volutpat. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t Cras in consectetur sem. Curabitur ac velit nibh. Donec ut lectus tellus. Mauris sit amet dignissim eros, imperdiet auctor orci. 
 
\t \t \t \t <br><br> 
 
\t \t \t \t 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> 
 
\t </body> 
 
</html>

任何幫助表示讚賞

來源

2017-04-26 keronconk

使用[媒體查詢（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）。 – TricksfortheWeb

首先，你應該提高這個HTML代碼，分塊。

你應該把＃公司簡介細節-1和＃公司簡介圖像-1在separeted DIV和CSS你說：

float: left; 
width: 100%;

爲這兩個新的申報單。

同爲他人#aboutus

來源

2017-04-26 17:23:36 SpaceDogCS

你有興趣使用像引導一個負責任的框架？ 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>

來源

2017-04-26 18:52:20 Cameron

HTML CSS佈局變焦劇變

回答

相關問題