Html 如何防止浮动div；掉下来；？
我看过以前类似的问题，似乎没有一个能得到我想要的结果 这是我想做的布局 这个问题是在一节，说起源和有形象 有一个包含2个子div的div。一个子元素随文本向左浮动，一个子元素随图像向右浮动 当你缩放窗口时，我希望div也能缩放 问题是，当您将窗口缩放到某个点时，右子对象会下降到左子对象的下方 我试图使孩子的显示：内联块和容器溢出：隐藏；空白：现在删除，但是段落中的文本会在整个布局之外流动 这是代码Html 如何防止浮动div；掉下来；？,html,css,Html,Css,我看过以前类似的问题，似乎没有一个能得到我想要的结果 这是我想做的布局 这个问题是在一节，说起源和有形象 有一个包含2个子div的div。一个子元素随文本向左浮动，一个子元素随图像向右浮动 当你缩放窗口时，我希望div也能缩放 问题是，当您将窗口缩放到某个点时，右子对象会下降到左子对象的下方 我试图使孩子的显示：内联块和容器溢出：隐藏；空白：现在删除，但是段落中的文本会在整个布局之外流动 这是代码 <!DOCTYPE html> <html> <head>
<!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>
身体{
保证金：0；
填充：0；
背景颜色：黄色；
}
#容器{
宽度：100%；
背景颜色：蓝色；
}
#主内容容器{
填充：0px 20px 40px 20px；
保证金：0px自动；
最大宽度：1090px；
背景色：白色；
溢出：自动；
}
#主目录左栏{
宽度：65.1%；
保证金：0px 10px 0px 0px；
浮动：左；
}
#主要内容右列{
宽度：33%；
保证金：0px 0px 0px 10px；
浮动：对；
}
#历史图片{
宽度：100%；
保证金：10px自动0px自动；
}
p{
填充：0px；
保证金：0px 0px 10px 0px；
字体系列：“Roboto”，衬线；字体重量：300；
颜色：黑色；
字体大小：16px；
文本对齐：对齐；
起源
波浪滑动的历史回顾
自人类开始在海洋中游泳以来，冲浪就很可能存在。从这个意义上说，身体冲浪是最古老的一种冲浪方式。站在现在被称为冲浪板的平台上是波利尼西亚人开发的一项相对较新的创新。现代冲浪的影响可以直接追溯到接触前的夏威夷冲浪者二,
冲浪艺术在夏威夷语中被称为he'enalu。1769年，詹姆斯·库克船长第三次航行时，约瑟夫·班克斯（Joseph Banks）在英国皇家海军奋进号上首次描述了冲浪艺术。冲浪是古代波利尼西亚文化的一个中心部分，早于欧洲接触。酋长他是社区中技术最熟练的冲浪者，用最好的树制作了最好的冲浪板。统治阶级拥有最好的海滩和最好的冲浪板，普通人不允许在同一个海滩上冲浪，但他们可以通过使用棘轮冲浪板冲浪而获得声望
这项运动也被其他欧洲居民和游客记录在案，他们写下并拍摄了萨摩亚人在木板和独木舟船体上冲浪的故事；萨摩亚人将冲浪称为fa'ase'e或se'egalu。爱德华·特雷格还确认了萨摩亚人对萨摩亚冲浪和冲浪板的术语。口头传统确认冲浪是一种传统lso在汤加练习，已故国王陶法阿豪·图普四世是他那个时代最重要的汤加冲浪运动员
#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;
}
您应该使用引导块。伪代码为：
<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>
尝试以下更改。这将适用于您
#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;
}
如果您也在考虑使用
内联块float #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;
}