將行移到列CSS

我是編程新手，誰能告訴我如何將這個盒子移到另一個盒子旁邊？我想做 3 列，這里有一些插圖希望有幫助

這是我的演示：

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  position: absolute;
  left: 0;
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}

<section class="product spad">
        <div class="container">
            <div class="row">

                <div class="col-lg-4 col-md-8 col-sm-8">
                    <div class="sidebar_product">
                        <div class="product__sidebar__view">
                            <div class="section-title">
                                <h5>Main Menu</h5>
                            </div>
                            <div class="coloumn">
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

有誰知道該怎么做？謝謝大家！

uj5u.com熱心網友回復：

你的意思是這樣嗎？

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 15px;
  margin-bottom: 20px; //i've change all of this but seems doesn't work
}

.product__sidebar__view__item h5 {
  bottom: 25px;
  width: 100%;
  padding: 0 30px 0 20px;
}

.product__sidebar__view__item h5 a {
  color: red;
  font-weight: 700;
  line-height: 26px;
}

.coloumn {
  display: flex; 
  justify-content: space-evenly;}

<section class="product spad">
        <div class="container">
            <div class="row">

                <div class="col-lg-4 col-md-8 col-sm-8">
                    <div class="sidebar_product">
                        <div class="product__sidebar__view">
                            <div class="section-title">
                                <h5>Main Menu</h5>
                            </div>
                            <div class="coloumn">
                                <div class = "product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
                                    <h5><a href="/billing">Survey</a></h5> 
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
                                    <h5><a href="#">Actor Mapping</a></h5>
                                </div>
                                 <div class="product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Political Text Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
                                    <h5><a href="#">Social Media Network Analysis</a></h5>
                                </div>
                                <div class="product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
                                    <h5><a href="#">Media Monitoring</a></h5>
                                </div>
                            </div>  
                        </div>        
                    </div>
                </div>
        </div>
    </div>

uj5u.com熱心網友回復：

您必須將行類添加到列 div 和 col-4 到子 div，如下所示：

<div class="coloumn row">
    <div class="col-4 product__sidebar__view__item set-bg mix month week" data-setbg="/assets/2.jpg">
        <h5><a href="/billing">Survey</a></h5>
    </div>
    <div class="col-4 product__sidebar__view__item set-bg mix month week" data-setbg="/assets/1.jpg">
        <h5><a href="#">Actor Mapping</a></h5>
    </div>
    <div class="col-4 product__sidebar__view__item set-bg mix week years" data-setbg="/assets/4.jpg">
        <h5><a href="#">Political Text Analysis</a></h5>
    </div>
    <div class="col-4 product__sidebar__view__item set-bg mix years month" data-setbg="/assets/4.jpg">
        <h5><a href="#">Social Media Network Analysis</a></h5>
    </div>
    <div class="col-4 product__sidebar__view__item set-bg mix years month" data-setbg="/assets/3.jpg">
        <h5><a href="#">Media Monitoring</a></h5>
    </div>
</div>

uj5u.com熱心網友回復：

我通常在 BS 上這樣使用

好像你把所有的img放在一個col里

<div class="row">
    <div class="col-4">
        <p class="margin-padding">111</p>
    </div>
    <div class="col-4">
        <p class="margin-padding">222</p>
    </div>
    <div class="col-4">
        <p class="margin-padding">333</p>
    </div>
</div>

或者使用Flex可以做這樣的
CSS：

.displayFlex{display:flex;}
.flex1{flex:1;}

HTML

<div class="displayFlex">
    <p class='flex1'>111</p>
    <p class='flex1'>222</p>
    <p class='flex1'>333</p>
</div>

標籤：html css

上一篇：如何在td之后添加td

下一篇：另一個div中的div的選擇器類是什么