元素不会正常浮动

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>

没有“display：block”＆amp;浏览器显示的p元素上的“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>