Изображения не будут плавать в столбцы

ive застрял, пытаясь плавать эти фотографии на две колонки в течение нескольких дней. Они просто остаются сосредоточенными независимо от того, насколько малы они делают их. Они будут очень маленькими и все еще не плавают, один раз они плавали, но я не могу вернуться к этому, и даже когда они это сделали, они были беспорядочны и не делали столбцы, я просто хочу создавать столбцы. Я использовал классы.group1 и.group2 для таргетинга на вещи, которые нужно поплавать

<ul>
 <div>
 <li>
 
 <p>I've had a perfectly wonderful evening. But this wasn't it.</p>
 <p>-Groucho Marx</p>
 </li>
 <li>
 
 <p>"A man only as old as the woman he feels."</p>
 <p>-Groucho Marx</p>
 </li>
 <li>
 
 <p>"I intend to live forever, or die trying."</p>
 <p>-Groucho Marx</p>
 </li>
 </div>
 <div>
 <li>
 
 <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>
 
 <p>"honk honk"</p>
 <p>Harpo Marx</p>
 </li>
 <li>
 
 <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;
 }
1 ответ

Вам нужно исправить вашу структуру HTML. Только элементы

  • могут быть прямыми
      элементами элементов
        . В этой новой структуре я создал два элемента
          и изменил float на
            а не на
          • : jsfiddle
            <ul>
             <li>
             
             <p>I've had a perfectly wonderful evening. But this wasn't it.</p>
             <p>-Groucho Marx</p>
             </li>
             ...
            </ul>
            <ul>
             <li>
             
             <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;
            }
  • licensed under cc by-sa 3.0 with attribution.