HTML/CSS新手求助：图片始终居中，不知如何排版布局

Hey there! Let's tackle both your image layout problem and that frustrating Stack Overflow post rejection together.

First: Fixing the Image Alignment & Layout #

Looking at your code, here's why your images are stuck centered and not arranging the way you probably want:

• You're wrapping each .single-pic in its own .all-image container. Since .all-image is a block-level element, each one takes up the full width of the page, forcing your images to stack vertically.
• The text-align: center on .all-image is pushing each image container to the middle of its own line.
• Your .single-pic styles have width: 30% but since they're in separate parent containers, that percentage doesn't help them sit side-by-side.

Here's the corrected code to get your images arranged horizontally (adjust as needed for your desired layout):

Updated HTML #

I moved all your .single-pic elements into one shared .all-image container:

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>HOME</title>
</head>
<body>
    <div class="mytabs">
        <input type="radio" id="tabfree" name="mytabs" checked="checked">
        <label for="tabfree">Free</label>
        <div class="tab">
            <h2>Free</h2>
            <p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as quantity (number theory),[1] structure (algebra),[2] space (geometry),[1] and change (mathematical analysis).[3][4][5] It has no generally accepted definition.[6][7] Mathematicians seek and use patterns[8][9] to formulate new conjectures; they resolve the truth or falsity of such b h .</p>
        </div>
        <input type="radio" id="tabsilver" name="mytabs">
        <label for="tabsilver">Ser</label>
        <div class="tab">
            <h2>Sr</h2>
            <p>jctivity from as far back as written records exist. The research required to solve mathematical problems can take years or even centuries of sustained inquiry. Rigorous arguments first appeared in Greek mathematics, most notably in Euclid's Elements.[10] Since the pioneering work of Giuseppe Peano (1858–1932), David Hilbert (1862–1943), and others on axiomatic systems in the late 19th century, it has beco.</p>
        </div>
        <input type="radio" id="tabgold" name="mytabs">
        <label for="tabgold">Gd</label>
        <div class="tab">
            <h2>Gd</h2>
            <p>slow pace until the Renaissance, when mathematical innovations interacting with new scientific discoveries led to a rapid increase in the rate of mathematical discovery that has continued to the present day.[11]l </p>
        </div>

        <!-- IMAGES: Now all in one container -->
        <div class='all-image'>
            <div class='single-pic'>
                <img src='images/brid2.jpg' >
                <div class="image-text">
                    <h1>bride</h1>
                    <p>hapyy bride happy life</p>
                    <p>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </p>
                </div>
            </div>
            <div class='single-pic'>
                <img src='images/brid1.jpg' >
                <div class="image-text">
                    <h1>bride</h1>
                    <p>hapyy bride happy life2</p>
                    <p>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </p>
                </div>
            </div>
            <div class='single-pic'>
                <img src='images/image.jpg' >
                <div class="image-text">
                    <h1>bride</h1>
                    <p>hapyy bride</p>
                    <p>
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-youtube"></i></a>
                        <a href="#"><i class="fa fa-instagram"></i></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Updated CSS #

I adjusted the layout to make images align horizontally, fixed image sizing, and cleaned up conflicting styles:

/* Tab styles */
.mytabs {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%; /* Changed from 600px so images can span full width */
    margin: 50px auto;
    padding: 25px;
}
.mytabs input[type="radio"] {
    display: none;
}
.mytabs label {
    padding: 25px;
    background: white;
    font-weight: lighter;
}
.mytabs .tab {
    width: 100%;
    padding: 20px;
    background: #fff;
    order: 1;
    display: none;
}
.mytabs .tab h2 {
    font-size: 2em;
}
.mytabs input[type='radio']:checked + label + .tab {
    display: block;
}
.mytabs input[type="radio"]:checked + label {
    background: #18ffff;
    border-radius: 18px;
}

/* Image layout styles */
.all-image {
    display: flex; /* Makes child elements line up horizontally */
    flex-wrap: wrap; /* Wraps images to new line on small screens */
    gap: 20px; /* Adds space between images */
    justify-content: flex-start; /* Aligns images to left instead of center */
    margin-top: 30px; /* Adds space below tab content */
    width: 100%;
}
.all-image .single-pic {
    position: relative;
    width: calc(33.33% - 14px); /* 3 columns minus gap */
    height: auto; /* Let height adjust based on image */
}
.all-image .single-pic img {
    width: 100%; /* Makes image fill its container */
    height: auto; /* Maintains aspect ratio */
    display: block;
}
.image-text {
    position: absolute; /* Positions text over the image (optional) */
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 10px;
}
.image-text h1 {
    font-size: 1.2em;
    margin: 0;
}
.image-text p {
    margin: 5px 0;
}

Key changes I made:

• Combined all image containers into one .all-image wrapper with display: flex to enable horizontal layout
• Set width: calc(33.33% - 14px) on .single-pic to create 3 equal columns (adjust the percentage if you want more/less columns)
• Made images responsive with width: 100% so they don't overflow their containers
• Added gap to space out images cleanly
• Optional: Styled .image-text to overlay on the image (remove position: absolute if you want text below the image instead)

Second: Fixing Your Stack Overflow Post Rejection #

When Stack Overflow says "your post is mostly code", it just means you need to add more context about what you're trying to achieve. Here's what you can add to make your post compliant:

• Describe your desired outcome: "I want my three images to display side-by-side below the tab content, aligned to the left of the page, not stacked vertically in the center."
• Explain the current problem clearly: "Right now, each image is on its own line centered on the page, which doesn't match the layout I'm going for."
• Mention what you've tried (even if it didn't work): "I tried setting text-align: center on the image containers and width: 30% on the image blocks, but they still won't line up horizontally."

Adding these details helps other developers understand exactly what you need, and it will get your post approved quickly.

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