Question

我一直试图将这些照片浮动成两列数天。无论我做多么小，他们都会保持中心。它们将非常小并且仍然没有漂浮，有一次它们确实漂浮但我不能回到那个，即使它们确实它们都是凌乱而不是制作柱子，我只想制作柱子。我使用.group1和.group2类来定位要浮动的东西

       <ul class="secondary-content group">
    <div class="group1">
        <li>
            <img src= "MB6.jpg" alt="Wonderful evening">
            <p>I've had a perfectly wonderful evening. But this wasn't it.</p>
            <p>-Groucho Marx</p>
        </li>
        <li>
            <img src="love3.jpg" alt="Marilyn Monroe">
            <p>"A man's only as old as the woman he feels."</p>
            <p>-Groucho Marx</p>
        </li>
         <li>
            <img src="MB5.png">
            <p>"I intend to live forever, or die trying."</p>
            <p>-Groucho Marx</p>
        </li>
    </div>
    <div class="group2">
    <li>
        <img src="MB2.jpg">
        <p>Groucho: "Get outta here before I get arrested."</p>
        <p>Chico: "Nah I'd like to stay and see that."</p>
        <p>-Groucho Marx</p>
    </li>
    <li>
        <img src="MB4.jpeg">
        <p>"honk honk"</p>
        <p>Harpo Marx</p>
    </li>
    <li>
        <img src="MB9.jpg">
        <p>Groucho: "Do you follow me?"</p>
        <p>Margaret Dumont: "Yes!"</p>
        <p>Groucho: "Well, you better stop following me, or I'll have you arrested."</p>
    </li>
    </div>
 </ul>

  * {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
    }

    img {
        max-width: 100%;
    }

    a h1 {
        text-align: center;
    }

    .main-header{
        padding-top: 50px;
        height: 1000px;
        background: linear-gradient(#fff, transparent 60%),
                    linear-gradient(0deg, #fff, transparent 50%),
                    url('../MarxBros.jpg') no-repeat center;
    }

    .intro{
        text-align: center;
    }
    .secondary-content{
        width: 40%;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 auto;
        max-width:300px;
        text-align: center;
        ;
    }
    .secondary-content img{
        max-width:300px;
    }

    .group1 li {
        float: left;
    }
    .group2 li {
        float:right
    }

    .group:after {
        content: "";
        display: table;
        clear: both;
    }

Answer 1

您需要修复HTML结构。只有<li>元素可以是<ul>元素的直接子元素。在这个新结构中，我创建了两个<ul>元素并将浮点数更改为<ul>而不是<li>： jsfiddle < / p>

<ul class="secondary-content group group1">
    <li>
        <img src= "MB6.jpg" alt="Wonderful evening">
        <p>I've had a perfectly wonderful evening. But this wasn't it.</p>
        <p>-Groucho Marx</p>
    </li>
    ...
</ul>
<ul class="secondary-content group group2">
    <li>
    <img src="MB2.jpg">
    <p>Groucho: "Get outta here before I get arrested."</p>
    <p>Chico: "Nah I'd like to stay and see that."</p>
    <p>-Groucho Marx</p>
    </li>
    ...
</ul>


.group1 {
    float: left;
}
.group2 {
    float:right
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

图像不会浮动到列中

1 个答案: