Question

我看过以前类似的问题，似乎没有人能得到我需要的结果。

这是我试图制作的布局......

layout

问题出在ORIGINS部分，并有图像。

有一个包含div的div包含2个子div。一个孩子左边漂浮着文字，一个漂浮在图像上。

缩放窗口时，我希望div也能缩放。

问题在于，当您将窗口缩放到某个点时，右侧孩子会落到左侧孩子的下方。

我尝试制作孩子的显示：inline-block和容器溢出：隐藏; 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>

Answer 1

是的，内联块可能非常适合。但是很少有东西，你需要将边距更改为填充并添加box-sizing：border-box;为了使总宽度不超过容器。

应该是max-width：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;
}

Answer 2

您应该使用Bootstrap块。伪代码是：

<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块分成两部分，其中 text 区域 12部分的 8部分 其余部分到图像即 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; }

Answer 3

尝试以下更改。这对您有用

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

Answer 4

也许您应该尝试使用表而不是DIV。这似乎是一个效率更高的实例。

如何防止浮动div“掉线”？

4 个答案: