html - 元素不会正确 float

Question

当我尝试将段落向左浮动时，会发生这种情况:

使用这段代码:

 /* Story styles */

       #story {
          height: 872px;
        }

       /* Paragraph stles  */
        div#story p {
         float: left;
         display: block;
         color: #666666;
         font-size: 26px;
         font-family: BrandonGrotesque-Regular, sans-serif;
         width: 424.667px;
        }

        /* Right div */

        div#right {
         width: auto;
         float: left;
        }

 <div class="container" id="quick"> 
                <div id="nav-logo">
                    <img src="site_logo.png" alt="Site Logo" />
                </div>   
            </div>
            
            <div class="container">
            <div id="story">
                            <p>
                               At Robeks, every choice you make is a goodone! 
                             You can trust us to make delicious, good-for-you 
                            smoothies and juices using only the best fruits,
                        fresh vegetables, and natural ingredients. We believe 
                                you shouldn’t have to sacrifice taste for a 
                            healthy alternative – or health for a tasty one. 
                           We make it easy and enjoyable to take good care of 
                                yourself.
                            </p>
                            <p>
                        Whatever you choose is guaranteed to be as nutritious 
                              as it is tasty and delicious. A small choice at 
                       Robeks makes a big difference. Trust Robeks to create 
                         hand-crafted, great-tasting, nutritious alternatives 
                        that will keep you energized and satisfied. You have 
                     enough choices to make in a day. Robeks is an easy one.
                            </p>
                    
                    <div id="right">
                        <img src="about2017.jpg" alt="menu image" />
                    </div>
            </div>
            </div>

如果 p 元素上没有“display: block”和“float: left”，浏览器会显示:

/* Story styles */

#story {
    height: 872px;
}

/* Paragraph stles  */
div#story p {
    float: left;
    display: block;
    color: #666666;
    font-size: 26px;
    font-family: BrandonGrotesque-Regular, sans-serif;
    width: 424.667px;
}

/* Right div */

div#right {
    width: auto;
    float: left;
}

 <div class="container">
            <div id="story">
                            <p>
                                At Robeks, every choice you make is a good one! 
                                You can trust us to make delicious, good-for-you 
                                smoothies and juices using only the best fruits,
                                fresh vegetables, and natural ingredients. We believe 
                                you shouldn’t have to sacrifice taste for a 
                                healthy alternative – or health for a tasty one. 
                                We make it easy and enjoyable to take good care of 
                                yourself.
                            </p>
                            <p>
                                Whatever you choose is guaranteed to be as nutritious 
                                as it is tasty and delicious. A small choice at 
                                Robeks makes a big difference. Trust Robeks to create 
                                hand-crafted, great-tasting, nutritious alternatives 
                                that will keep you energized and satisfied. You have 
                                enough choices to make in a day. Robeks is an easy one.
                            </p>
                    </div>
                    
                    <div id="right">
                        <img src="about2017.jpg" alt="menu image" />
                    </div>
            </div>

我知道第二个错误可能是因为段落没有向左浮动，但我如何让段落显示在第二个片段中，并允许图像堆叠在两个段落旁边。

目标:

Answer 1

#story {
    height: 872px;
    display: inline-flex;
}

.p-left,.p-right {
    width: 65%;
    margin: auto;
    display: inline-block;
    text-align: left;
}
  .p-div {
    width: 76.5%;
    display:inline-block;
    text-align:center;
}
div#right {
    width: 23.5%;
    margin-top: 30px;
    margin: 35px 15px;
}
  div#right img{
  margin: 35px 0px;
  }
    div#story p {
     display: inline-block;
     color: #666666;
     font-size: 26px;
     margin:20px 0px;
     font-family: BrandonGrotesque-Regular, sans-serif;
     width: 100%;
    }

<div class="container">
<div id="story">
                     <div class="p-div"> <div class="p-left">  <p>
                           At Robeks, every choice you make is a goodone! 
                         You can trust us to make delicious, good-for-you 
                        smoothies and juices using only the best fruits,
                    fresh vegetables, and natural ingredients. We believe 
                            you shouldn’t have to sacrifice taste for a 
                        healthy alternative – or health for a tasty one. 
                       We make it easy and enjoyable to take good care of 
                            yourself.
                          </p></div>
                        <div class="p-right"><p>
                    Whatever you choose is guaranteed to be as nutritious 
                          as it is tasty and delicious. A small choice at 
                   Robeks makes a big difference. Trust Robeks to create 
                     hand-crafted, great-tasting, nutritious alternatives 
                    that will keep you energized and satisfied. You have 
                 enough choices to make in a day. Robeks is an easy one.
                            </p></div></div>

                <div id="right">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAK2t25vgyB-4HiONQrDtU9MVaptLiRk3PWPeUUEypBUVT1RYG0Q" alt="menu image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAK2t25vgyB-4HiONQrDtU9MVaptLiRk3PWPeUUEypBUVT1RYG0Q" alt="menu image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAK2t25vgyB-4HiONQrDtU9MVaptLiRk3PWPeUUEypBUVT1RYG0Q" alt="menu image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAK2t25vgyB-4HiONQrDtU9MVaptLiRk3PWPeUUEypBUVT1RYG0Q" alt="menu image">
                </div>
			
                
        </div>

                
        </div>