如何对齐 div 标签以便它们显示在一行中

Question

Div tag that wraps the additional div tags.

<div class="shoes-box">
                        <div>
                        <img class="shoe-image" src="pictures/jordan1.jpg" alt="Jordan Ones">
                        <p>Jordan 1's</p>
                        <p class="sizes-availabel">Sizes sizes-availabel</p>
                        <ol class="sizes-availabel-ol">
                            <li>size 6 UK</li>
                            <li>size 7 UK</li>
                            <li>size 8 UK</li>
                        </ol>
                        </div>

Picture two that should be aligned to the right of the other shoe

                        <div>
                            <img class="shoe-image" src="pictures/jordan3.jpg" alt="Jordan Threes">
                            <p>Jordan 3's</p>
                            <p class="sizes-availabel">Sizes sizes-availabel</p>
                            <ol class="sizes-availabel-ol">
                                <li>size 6 UK</li>
                                <li>size 7 UK</li>
                                <li>size 8 UK</li>
                            </ol>
                        </div>
                    </div>

Answer 1

I specified the two divs as div1 @ div2, then applied the following CSS Styling.

.div1{
  width: 45%;
  float: left;
  display: inline-block;
  border: 1px solid black;
  background: beige;
}
.div2{
  width: 50%;
  float: right;
  border: 1px solid black;
  display: inline-block;
    background: beige;

}

Here is the example:

 .div1{ width: 49%; float: left; display: inline-block; border: 1px solid black; background: beige; }.div2{ width: 49%; float: right; border: 1px solid black; display: inline-block; background: beige; } p { text-align: center; } ol { text-align: center; list-style-type: none; }.shoe-image { height: 10vh; width: auto; display: block; margin-left: auto; margin-right: auto; }

 <div class="div1"> <img class="shoe-image" src="https://th.bing.com/th/id/OIP.u7eQmPSGhB63KXY3hBYbUAHaE3?pid=ImgDet&rs=1" alt="Jordan Ones"> <p>Jordan 1's</p> <p class="sizes-availabel">Sizes sizes-availabel</p> <ol class="sizes-availabel-ol"> <li>size 6 UK</li> <li>size 7 UK</li> <li>size 8 UK</li> </ol> </div> <div class="div2"> <img class="shoe-image" src="https://th.bing.com/th/id/OIP.hjh2LiIQqnvLOdfQp_dqLgHaE6?pid=ImgDet&rs=1" alt="Jordan Threes"> <p>Jordan 3's</p> <p class="sizes-availabel">Sizes sizes-availabel</p> <ol class="sizes-availabel-ol"> <li>size 6 UK</li> <li>size 7 UK</li> <li>size 8 UK</li> </ol> </div> </div>