如何防止浮动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“跌落”？

回答

相关问题