HTML/CSS新手求助：如何让两个div横向排列而非纵向排列（未掌握Flexbox）

Hey there! Let's break down why your second article module is stacking below the first one, even though you set display: inline-block on the .wrapper elements. I’ll walk you through the fixes without needing Flexbox, since you haven’t learned that yet.

What’s Causing the Problem? #

1. Too-narrow parent container: Your .subarticle has a fixed width of 220px—exactly the width of one module. There’s no space for a second module to sit beside it, so it wraps to the next line.
2. Default inline-block gaps: Inline-block elements have automatic whitespace gaps between them (from line breaks/spaces in your HTML), which can push modules onto new lines even if you think the container is wide enough.
3. Uncontrolled positioning context: Your .subarticle uses position: absolute, but its parent <article> doesn’t have position: relative, so the absolute positioning is relative to the entire page instead of the article container (this might throw off your bottom layout later).

Step-by-Step Fixes #

Here’s how to adjust your code to get the modules side-by-side:

1. Update the CSS

We’ll fix the container width, eliminate inline-block gaps, and set a proper positioning context:

/* Add this to control the absolute positioning context */
article {
  position: relative;
  min-height: 100vh; /* Ensures the article takes full viewport height for bottom positioning */
}

.subarticle { 
    background: white; 
    width: 460px; /* Adjusted to fit two 220px modules + 20px gap */
    height: 350px; 
    position: absolute; 
    top: 135%; 
    left: 20%; 
    border: 1px solid black; 
    font-size: 0; /* Removes whitespace gaps between inline-block elements */
} 

.wrapper { 
    display: inline-block; 
    vertical-align: top; /* Aligns modules to the top (prevents misalignment if content heights vary) */
    width: 220px; /* Fixes module width to match your original design */
    font-size: 16px; /* Restores font size (overrides parent's font-size: 0) */
    box-sizing: border-box; /* Ensures padding/borders don't expand the module width */
}

/* Keep your existing styles below */
.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; 
}

2. Tweak the HTML

Remove the whitespace between your .wrapper elements to eliminate any remaining gaps:

<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"> <!-- No space between closing and opening div tags -->
            <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>

For 4 Modules Later #

When you’re ready to add the other two modules, just update .subarticle’s width to 940px (220px * 4 modules + 20px gap * 3 spaces between modules) and add two more .wrapper elements (with no whitespace between them).

内容的提问来源于stack exchange，提问作者Mitrixsen