如何對齊兩個相鄰的div？

我正在嘗試將兩個 div 對齊。左邊的 div 有四個相互重疊的小影像，右邊的 div 有一個與左邊 div 大小相同的大影像。我一直在嘗試使用塊和行內塊以及它們的相對定位，但我不明白為什么它們沒有相互對齊。我得到了一個使用絕對位置的臨時解決方案，但我知道它并不是真正有用的東西。這是我的代碼：

HTML

<div class="container product-container">
    <!--Product Information-->
    <div class="row row-sm">
        <!--Product Images-->
        <div class="col-md-6 product-image-container">
          <!--Side Images-->
          <div class="side-picture-container">
            <ul class="picture-list">
              <li><img src="https://s.fotorama.io/1.jpg"></li>
              <li><img src="https://s.fotorama.io/2.jpg"></li>
              <li><img src="https://s.fotorama.io/3.jpg"></li>
              <li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
            </ul>
          </div>
          <!--Current Product Image-->
          <div class="big-product-image">
            <img class="current-product-image" src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div class="col-md-6">

        </div>
    </div>
</div>

CSS

.product-container
{
    margin-top: 4vw;
    display: block;
}

.product-image-container
{
    display: inline-block;
}

.picture-list li
{
    display: inline-block;
    width: 110px;
    height: 114px;
    border: none;
}

.picture-list li img
{
    width: 97%;
    height: auto;
}

.product-image-container .side-picture-container
{
    width: 90px;
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
    position: relative;
}

.picture-list li img
{
    height: 100px;
    object-fit: cover;
    border-radius: 10%;
}

/* .big-product-image
{
    position: relative;
} */

.current-product-image
{
    position: absolute;
    height: 450px;
    width: 350px;
    margin-top: 0.25vw;
    border-radius: 10%;
    top: 27.75%;
    left: 20%;
}

我需要做什么才能讓“側面圖片容器”和“大產品圖片”彼此相鄰？

uj5u.com熱心網友回復：

嗯，有很多不需要的 CSS。洗掉絕對定位后，最大的問題是“product-image-container”上的類使用“col”而不是“row”，并且同時具有“product-image-container”和“side-”圖片容器”使用與“寬度：90px;”相同的類定義。

一旦我做出了這些改變，你所做的一切。

.product-container
{
    margin-top: 4vw;
}

.product-image-container
{
    display: flex;
}

.picture-list li
{
    width: 110px;
    height: 114px;
    border: none;
}

.picture-list li img
{
    width: 97%;
    height: auto;
}

.product-image-container .side-picture-container
{
    vertical-align: top;
    margin-top: 0px;
}

.picture-list li img
{
    height: 100px;
    border-radius: 10%;
}

.current-product-image
{
    height: 450px;
    width: 350px;
    margin-top: 0.25vw;
    border-radius: 10%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container product-container">
    <!--Product Information-->
    <div class="row-md-6">
        <!--Product Images-->
        <div class="row-md-6 product-image-container">
          <!--Side Images-->
          <div class="col-md-6 side-picture-container">
            <ul class="picture-list">
              <li><img src="https://s.fotorama.io/1.jpg"></li>
              <li><img src="https://s.fotorama.io/2.jpg"></li>
              <li><img src="https://s.fotorama.io/3.jpg"></li>
              <li><img src="https://ucarecdn.com/382a5139-6712-4418-b25e-cc8ba69ab07f/-/stretch/off/-/resize/760x/"></li>
            </ul>
          </div>
          <!--Current Product Image-->
          <div class="big-product-image">
            <img class="current-product-image" src="https://s.fotorama.io/1.jpg">
          </div>
        </div>
        
        <!--Product Text-->
        <div class="col-md-6">

        </div>
    </div>
</div>

uj5u.com熱心網友回復：

好吧，對于初學者來說，您的 current-product-image 類是絕對定位的。

我建議使用 flex 并排放置東西

https://jsfiddle.net/c23ad57b/

<div class="flex-container">

  <div class="flex-child magenta">
    Flex Column 1
  </div>
  
  <div class="flex-child green">
    Flex Column 2
  </div>
  
</div>

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

.flex-child:first-child {
    margin-right: 20px;
} 

uj5u.com熱心網友回復：

我只是用不同的方式制作上面的代碼......你可以選擇你喜歡的，對我來說，我不喜歡使用margin，我盡可能避免它

.flex-container {
    display: flex;
    gap: 10px;
}
/* any child element of flex container that has .flex-child can grow by 1 */

.flex-container > *.flex-child {
    flex: 1;
    border: 2px solid yellow;
}  

標籤：htmlcss引导模式

上一篇：如何-將資料屬性添加到當前元素

下一篇：顯示彈性中斷布局的百分比高度