时间戳

首页 > 解决方案 > 如何让两个 div 彼此相邻而不是在彼此下方？

html - 如何让两个 div 彼此相邻而不是在彼此下方？

问题描述

我仍在学习 html/css，因此如果代码错误，我深表歉意。我一直在做一个网站的复制品。网站下方有 4 篇文章。 在此处输入图像描述

我已经创建了两个，但第二个总是出现在第一个下面，即使我给了包装它的 div “display: inline-block;”。我还没有学习 flexbox，知道如何解决这个问题吗？

.subarticle {
    background: white;
    width: 220px;
    height: 350px;
    position: absolute;
    top: 135%;
    left: 20%;
    border: 1px solid black;
    
    
}

.goodidea {
    width: 100%;
    height: 40%;
}

.SOČ {
    font-family: "Open Sans",sans-serif;
}

.informacie {
    margin-top: -15px;    
    margin-left: 20px;
    font-family: "Open Sans",sans-serif;
    
}

.far {
    margin-right: 7px;
}

h3 {
    font-size: 15px;
    color: red;
    text-align: center;
    margin-right: 10px;
    
}

.read {
    color: orange;
    margin-top: -8px;
    margin-left: -10px;
    font-weight: 700;
    font-size: 12px;
    width: 70px;
    
}

.read:hover {
    background: rgb(241, 221, 184);
    transition: 0.3s ease;
    cursor: pointer;
}

.wrapper {
    display: inline-block;
    vertical-align: middle;
}
<article>
    <div class="subarticle">
      <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

         </div>

    </div>
        
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

        </div>
        </div>    

</div> 


</article>

提前致谢

标签： htmlcss

解决方案

在父元素上使用display:flex;，它们将排成一行。您将不再需要 CSS。

CSS：

.subarticle{
  display:flex;
}

Codepen 链接： https ://codepen.io/emmeiWhite/pen/YzGjOgP

完整代码片段：

.subarticle{
  display:flex;
}
<article>
    <div class="subarticle">
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

         </div>

    </div>
        
        <div class="wrapper">
        <img src="img/logo2.jpg" alt="logo s textom good idea" class="goodidea">
        <div class="informacie">
            <h2 class="SOČ">SOČ</h2>
            
            <p class="datum"><i class="far fa-calendar-times"></i>6.1.2021</p>
            
            <h3>
                Stredoškolská odborná činnosť <br> <br>
                Prekonaj sám seba a ukáž, že máš talent...
            </h3>
            <p class="read">ČÍTAŤ VIAC</p>

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

推荐阅读