HTML/CSS - 如何將我的圖像放置在右側，以便它可以與左側的文本對齊？

Question

我是新來的HTML和CSS，當我嘗試編寫代碼時出現了一些問題。我想的是，

• 文本（左側中間部分）和圖像（在右側中間部分）並排
• 自適應設計 - 可讓文字在頂部和圖像是在底部

這裏有問題，

1. 如何把我的形象定位到右側，以便它可以與我的左文本對齊？
2. 文本和圖像似乎向下傾斜。
3. 當我調整瀏覽器的大小時，文字和圖片沒有反應，一切都崩潰了，我該如何解決？

非常感謝！

.first_section { 
 
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg'); 
 
    background-position:center top; 
 
    background-size: cover; 
 
    padding: 200px 150px; 
 
    margin: 0 30px; 
 
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif'; 
 
} 
 

 
#first_section_text { 
 
    float: left; 
 
    text-align: left; /*Set everything to the left */ 
 
    display: block; 
 
    width: 50%; 
 
} 
 

 
#first_section_image { 
 
    float: right; /* float property can be used to wrap text around images */ 
 
    width: 50%; 
 
    height: 50%; 
 
    display: block; 
 
}

 <div class="first_section"> 
 

 
      <div id="first_section_text"> 
 
       <p>IT'S OFFICIALLY SANDWICHES SEASON</p> 
 
       <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p> 
 
       <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a> 
 
      </div> 
 

 
      <div id="first_section_image"> 
 
       <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/> 
 
      </div>   
 

 
     </div>

Answer 1

看到下面的代碼片段或小提琴的位置>jsfiddle

第一。 .first_section上的填充是一個錯誤。這就是爲什麼你的內容定位如此之差，正如你所說：Both text and image seems to have skewed downward.

秒。在.first_section上使用float:left;和width，因此它將繼承其內容的高度。

我用width:90%與margin:0 5%，因爲我看到你想要有左右邊距。

然後在屏幕變小時使用media queries將上方的文本和圖像放置在文本下方。屏幕尺寸小於640px時，我使用了media query。但這僅僅是一個例子，不管你想要改變它。

在該媒體查詢中添加width:100%到文本和圖像，以便他們將一個接一個留下來。

讓我知道，如果它可以幫助

.first_section { 
 
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg'); 
 
    background-position:center top; 
 
    background-size: cover; 
 
    float:left; 
 
    width:90%; 
 
    margin: 0 5%; 
 
    padding:15px; 
 
    box-sizing:border-box; 
 
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif'; 
 
} 
 

 
#first_section_text { 
 
    float: left; 
 
    text-align: left; /*Set everything to the left */ 
 
    display: block; 
 
    width: 50%; 
 
} 
 

 
#first_section_image { 
 
    float: right; /* float property can be used to wrap text around images */ 
 
    width: 50%; 
 
    height: 50%; 
 
    display: block; 
 
} 
 

 
@media only screen and (max-width: 640px) { 
 
#first_section_image { float:left;width:100%;} 
 
#first_section_text{ float:left;width:100%;} 
 

 
}

<div class="first_section"> 
 

 
      <div id="first_section_text"> 
 
       <p>IT'S OFFICIALLY SANDWICHES SEASON</p> 
 
       <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p> 
 
       <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a> 
 
      </div> 
 

 
      <div id="first_section_image"> 
 
       <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/> 
 
      </div>   
 

 
     </div>

Answer 2

.first_section { 
 
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg'); 
 
    background-position:center top; 
 
    background-size: cover; 
 
    padding: 200px 150px; 
 
    margin: 0 30px; 
 
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif'; 
 
} 
 

 
#first_section_text { 
 
    float: left; 
 
    text-align: left; /*Set everything to the left */ 
 
    display: block; 
 
    width: 50%; 
 
} 
 

 
#first_section_image { 
 
    float: right; /* float property can be used to wrap text around images */ 
 
    width: 50%; 
 
    height: 50%; 
 
    display: block; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    
 
#first_section_text 
 
    , #first_section_image{ 
 
    width: 100%; 
 
    float: left; 
 
    } 
 
}

<div class="first_section"> 
 

 
      <div id="first_section_text"> 
 
       <p>IT'S OFFICIALLY SANDWICHES SEASON</p> 
 
       <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p> 
 
       <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a> 
 
      </div> 
 

 
      <div id="first_section_image"> 
 
       <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/> 
 
      </div>   
 

 
     </div>

Answer 3

請檢查下面的代碼。 我用你的標記和CSS，只是修改它。 你的目標是首先顯示圖像，然後是移動視圖中的文本，所以要管理，我先添加圖像，然後在標記中添加文本，然後在CSS中向它們添加浮動。 在移動視圖中，刪除浮動，以便圖像將顯示第一個，然後顯示文本內容。 嘗試這種解決方案:) CSS的

.first_section { 
 
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg'); 
 
    background-position:center top; 
 
    background-size: cover; 
 
    height:300px; 
 
    margin: 0 30px; 
 
    padding:100px 20px; 
 
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif'; 
 
} 
 

 
#first_section_text { 
 
    float: left; 
 
    text-align: left; /*Set everything to the left */ 
 
    display: block; 
 
    width: 50%; 
 
} 
 

 
#first_section_image { 
 
    float: right; /* float property can be used to wrap text around images */ 
 
    width: 50%; 
 
    display: block; 
 
} 
 

 
@media (max-width:480px){ 
 
    #first_section_image{ 
 
    float:none; 
 
    width:100%; 
 
    text-align:center; 
 
    } 
 
    #first_section_text{ 
 
    float:none; 
 
    width:100%; 
 
    text-align:center; 
 
    } 
 
}

<div class="first_section"> 
 
    <div id="first_section_image"> 
 
    <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/> 
 
    </div>   
 
    <div id="first_section_text"> 
 
    <p>IT'S OFFICIALLY SANDWICHES SEASON</p> 
 
    <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p> 
 
    <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a> 
 
    </div> 
 
</div>