我如何对齐两个div相邻彼此?

Question

我正在尝试对齐两个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%;
}

我需要做些什么才能把'side-picture-container'和'big-product-image'放在一起?

Answer 1

好吧，有很多CSS不需要在那里。去掉绝对定位后，最大的问题是使用"颜色"的组合;而不是"row"在"product-image-container"同时拥有" product-image-container ","side-picture-container"使用与"width: 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>

Answer 2

首先，你的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;
} 

Answer 3

我只是用一种不同的方式编写上面的代码…你可以选择你喜欢的，对我来说，我不喜欢使用边距，我尽量避免使用

.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;
}  

Answer 4

. //"the class for the div "
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18rem, auto));
// this will be the uniform gaps. You can use your dimension in px or rem
gap:2rem;
//this will the horizontal gaps between the divs    
row-gap:2rem;
//this will be the vertical gaps between the divs
column-gap:2rem; 

}