【问题标题】：How to display DIV to the left of another DIV using Bootstrap [duplicate]如何使用 Bootstrap 在另一个 DIV 的左侧显示 DIV [重复]
【发布时间】：2021-01-13 02:09:53
【问题描述】：

我想创建一个 棋盘格样式 的页面 (HTML)，因此第一行的图像位于内容的左侧，第二行的图像位于内容的右侧内容。

从语义上讲，我可以改变 HTML 的结构来实现这一点，但有没有办法纯粹使用 CSS + Bootstrap 4 来做到这一点，这样 HTML 就不需要改变了。

我最初有一个课程“left-img”和“right-img”来实现这一目标，但没有成功。

目前我在我的CSS 中有这个，每个事件元素都在其中。

.checker:nth-child(even) .img-wrapper {
    float:right;
}
.checker:nth-child(odd) .img-wrapper {
    float:left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>
<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>

完整示例

我的密码笔https://codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我希望 css 和 html 的这些变化对你有帮助！！！

.checker:nth-child(odd) > .col-lg-6:last-of-type{
    float:left !important;
}

.checker:nth-child(even) > .col-lg-6:first-of-type{
    float:left !important;

}

img{
  width:100px;
}

.col-lg-6{
  float:right;
}

.row{
  float:right;
  width:100%;
}

<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
    </div>
</div>
<div class="row checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
    </div>
</div>

【讨论】：

谢谢 Yasaman，根据我的 CMS，我无法更改 HTML 或根据行更改类。因此，每个 html 标记都需要相同，并且仅在 CSS 中实现这一点。
我删除了html的更改，你可以使用css。
再次感谢 Yeasaman，css 的唯一问题是我有引导程序，我不愿意更改或修改默认引导程序类。我的代码笔是codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100

【解决方案2】：

您只需在您的.checker:nth-of-type(even) 中添加display: flow-root!important;

.checker .img-wrapper img {
    width:100%;
    height:auto;
}

/* Set the default behaviour */
.checker .img-wrapper {
    padding: 0px!important
}
.checker .text-wrapper {
    padding: 0px!important
}

/* Help determin if we have the right widget */
.checker:nth-of-type(even) {
    background-color:#eeeeee;
    display: flow-root!important;
}


//margin 0 to row
.checker {
  margin-left: 0px!important;
  margin-right: 0px!important;
}
//padding 0 to col
.col-lg-6 {
  padding: 0px!important;
}
h2, .text {
  padding: 12px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>

  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
  <div class="row checker">
        <div class="col-lg-6 text-wrapper">
            <h2>A Title</h2>
            <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
              consequat. Duis aute irure dolor in reprehenderit in voluptate.
            </div>
        </div>
        <div class="col-lg-6 img-wrapper">
          <img src="https://cdn.jpegmini.com/user/images/slider_puffin_jpegmini_mobile.jpg" alt="">
        </div>      
    </div>
  
</div>

【讨论】：

Hey Mehedi，这行得通，我添加了 ".checker:nth-of-type(even) .text-wrapper { float:right !important; }" 以确保文本也在流动，但这解决了它。谢谢
你也可以添加 flex-direction: row-reverse;到你的 .checker:nth-of-type(even)，它也可以工作
现场演示：使用 row-reverse 000541203.production.codepen.plumbing

【解决方案3】：

您的 CSS 是正确的，但如果您需要对齐图像，那么您应该调用 img 到您的 CSS

.checker:nth-child(even) .img-wrapper img {
    float:right;
}
.checker:nth-child(odd) .img-wrapper img {
    float:left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>



<div class="row m-0 checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>
<div class="row m-0 checker">
    <div class="col-lg-6">
        <div class="">
            <h2>The Title</h2>  
            <div class="">
                some text
            </div>
        </div>
    </div>
    <div class="col-lg-6 img-wrapper">
        <img src="https://via.placeholder.com/140x100" alt="">
    </div>
</div>

【讨论】：

这接近我所需要的。我意识到我的第 n 个（偶数）或第 n 个孩子（奇数）有问题。检查器类在每一行上，因此 CSS 需要选择每隔一个“.checker”作为第二个兄弟
我查找了一个伪选择器“.nth-of-type(even)”。仍然没有运气，但我认为它已经接近我所需要的了
还没有，还是不能如我所愿。我有一个密码笔codepen.io/s-mcdonald/pen/qBZvwyX?editors=1100