如何防止浮動div「跌落」？

我看了以前的類似問題，似乎沒有得到我需要的結果。如何防止浮動div「跌落」？

這是佈局我試着做...

layout

的問題是，說的起源和具有圖像的部分。

有一個包含div包含2個子div。一個孩子向左漂浮着文字，一個向右漂浮着影像。

當您縮放窗口時，我希望div也可以縮放。

問題是，當您將窗口縮放到某個點時，右邊的孩子落在左邊的孩子下面。

我試着讓孩子的顯示器：內聯塊和容器溢出：隱藏; white-space：nowrap，但是段落中的文本會在整個佈局之外流動。

這裏是代碼...

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

     body{ 
      margin: 0; 
      padding: 0; 
      background-color: yellow; 
     } 

     #container{ 
      width: 100%; 
      background-color: blue; 
     } 

     #main_content_container{ 
      padding: 0px 20px 40px 20px; 
      margin: 0px auto; 
      max-width: 1090px; 
      background-color: white; 
      overflow: auto; 
     } 

     #main_content_left_col{ 
      width: 65.1%; 
      margin: 0px 10px 0px 0px; 
      float: left; 
     } 

     #main_content_right_col{ 
      width: 33%; 
      margin: 0px 0px 0px 10px; 
      float: right; 
     } 

     #history_pic{ 
      width: 100%; 
      margin: 10px auto 0px auto; 
     }    

     p{ 
      padding: 0px; 
      margin: 0px 0px 10px 0px; 
      font-family: 'Roboto', serif; font-weight: 300; 
      color: black; 
      font-size: 16px; 
      text-align: justify; 

    </style> 

</head> 

<body> 

    <div id="container"> 

     <div id="main_content_container"> 

      <div id="main_content_left_col"> 

       <h1>ORIGINS</h1> 

       <h2>A look at the history of wave sliding</h2> 

       <p>The riding of waves has likely existed since humans began swimming in the ocean. In this sense, bodysurfing is the oldest type of wave-catching. Standing up on what is now called a surfboard is a relatively recent innovation developed by the Polynesians. The influences for modern surfing can be directly traced to the surfers of pre-contact Hawaii.</p> 

       <p>The art of surfing, called he'enalu in the Hawaiian language, was first described in 1769 by Joseph Banks on the HMS Endeavour during the third voyage of Captain James Cook. Surfing was a central part of ancient Polynesian culture and predates European contact. The chief (Ali'i) was the most skilled wave rider in the community with the best board made from the best tree. The ruling class had the best beaches and the best boards, and the commoners were not allowed on the same beaches, but they could gain prestige by their ability to ride the surf on their ratchet boards.</p> 

       <p>The sport was also recorded in print by other European residents and visitors who wrote about and photographed Samoans surfing on planks and single canoe hulls; Samoans referred to surf riding as fa'ase'e or se'egalu. Edward Treager also confirmed Samoan terminology for surfing and surfboards in Samoa. Oral tradition confirms that surfing was also practiced in Tonga, where the late king Taufa'ahau Tupou IV was the foremost Tongan surfer of his time.</p> 

      </div> 

      <div id="main_content_right_col"> 

       <img id="history_pic" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/history_pic_zpsmy5pfaet.jpg" /> 

      </div> 

     </div> 

    </div> 

</body> 

</html>

來源

2015-03-30 Arsinek

的工作，你可能想嘗試刪除'float'如果您還使用'直列block'考慮，同時具有目前通常是不必要的！嘗試讓佈局在沒有浮動的情況下正常工作。 – 2015-03-30 18:07:42

我做到了。文本從容器中流出，離開頁面。 – Arsinek 2015-03-30 18:09:12

問題是你應該設置兩個div屬性位置內的所有inner-tags：relative; – 2015-03-30 18:10:04

是的，內聯塊可以是一個很好的選擇。但是有幾件事情，你需要將邊距改爲填充並添加框尺寸：border-box;爲了使總寬度不超過容器。

它應該是最大寬度：100％;而不是寬度：100％;還請閱讀CSS代碼中的註釋。

DEMO：http://jsfiddle.net/5Lad2psj/

body { 
    margin: 0; 
    padding: 0; 
    background-color: yellow; 
} 
#container { 
    width: 100%; 
    background-color: blue; 
} 
#main_content_container { 
    padding: 0px 20px 40px 20px; 
    margin: 0px auto; 
    max-width: 1090px; 
    background-color: white; 
    /* overflow: auto; */ 
    /* font-size: 0; */ /*enable this if necessary - to fix spacing issue*/ 
} 
#main_content_left_col { 
    width: 65.1%; 
    /* margin: 0px 10px 0px 0px; */ 
    /* float: left; */ 
    padding: 0px 10px 0px 0px; 
    display: inline-block; 
    box-sizing: border-box; 
    vertical-align: top; 
    /* font-size: 16px; */ /*if it's set to 0 on the parent, you'll need this*/ 
} 
#main_content_right_col { 
    width: 33%; 
    /* margin: 0px 0px 0px 10px; */ 
    /* float: right; */ 
    padding: 0px 0px 0px 10px; 
    display: inline-block; 
    box-sizing: border-box; 
    vertical-align: top; 
    /* font-size: 16px; */ /*if it's set to 0 on the parent, you'll need this*/ 
} 
#history_pic { 
    /* width: 100%; */ 
    margin: 10px auto 0px auto; 
    max-width: 100%; 
    height: auto; 
} 
p { 
    padding: 0px; 
    margin: 0px 0px 10px 0px; 
    font-family:'Roboto', serif; 
    font-weight: 300; 
    color: black; 
    font-size: 16px; 
    text-align: justify; 
}

來源

2015-03-30 18:12:43 Stickers

謝謝兄弟，這是做的伎倆。我們真的不應該說謝謝？看起來很奇怪。此外，說「謝謝，這有效」似乎可能是有用的信息，因爲它驗證了響應的工作。 – Arsinek 2015-03-30 18:32:26

-5

也許你應該嘗試使用表，而不是的DIV。這似乎是一個效率更高的例子。

來源

2015-03-30 18:07:55 SemiViral

表格用於表格數據。 – Scott 2015-03-30 18:11:50

表格通常用於數據。 – dowomenfart 2015-03-30 18:11:58

您應該使用引導塊。僞代碼是：

<div class="container"> 
    <div class="inner-content"> 
    <div class="row"> 

     <div class="span8"> 
      .... 
      .....//the text content goes in here. 
     </div 

     <div class="span4"> 
      //div class for the image 
     </div> 

     </div> 
    </div> 
    </div>

在這裏，你劃分DIV塊分成兩個部分，其中的文本面積得到8份12份的，其餘進到圖像即4部分。

對他們來說，CSS是以下（櫃面你沒有的話）：

.container { padding: 0 15px !important;} 

.inner_content { padding:25px 0 0 0;text-align:left;} 

.span8 { 
    width: 770px; 
    } 
.span4 { 
    width: 370px; 
    } 

@media (min-width: 1200px) { 
    .row { 
    margin-left: -30px; 
    *zoom: 1; 
    }

來源

2015-03-30 18:17:48

我聽到這個術語bootstrap很多，但不知道它的任何內容。這是所有瀏覽器本身支持的東西，還是某種插件或什麼？ – Arsinek 2015-03-30 18:39:28

它是一組CSS類和JS，Twitter員工爲那些擔心後端而不是擔心前端的Web開發人員所做的一切。請訪問www.getbootstrap.com/css獲取更多信息！ – 2015-03-30 19:17:08

嘗試以下更改。這會爲你

 #main_content_left_col{ 
     width: 62.1%; 
     margin: 0px 10px 0px 0px; 
     float: left; 
     display: inline-block; 
    } 

    #main_content_right_col{ 
     width: 33%; 
     //margin: 0px 0px 0px 10px; 
     //float: right; 
     display: inline-block; 
    }

來源

2015-03-30 18:25:59

如何防止浮動div「跌落」？

回答

相關問題