CSS中的兩列布局 - 每行中的文本和圖像更改順序

你能幫我，告訴我我的CSS代碼有什麼問題嗎？它看起來像這樣：CSS中的兩列布局 - 每行中的文本和圖像更改順序

body 
     { 
      font-family: Open Sans, sans-serif; 
      padding: 5rem 1.25rem; /* 80 20 */ 
     } 

     .container 
     { 
      width: 100%; 
      max-width: 60rem; /* 960 */ 
      margin: 0 auto; 
     } 
      .item 
      { 
       width: 100%; 
       overflow: hidden; 
       margin-bottom: 5rem; /* 80 */ 
      } 
      } 
      .item 
      { 
       color: #666; 
      } 
       .item__info, 
       .item__img 
       { 
        width: 50%; 
        float: left; 
       } 
       .item:nth-child(even) .item__info 
       { 
        float: right; 
        padding-left: 1.25rem; /* 20 */ 
       } 
       .item:nth-child(even) .item__img 
       { 
        padding-right: 1.25rem; /* 20 */ 
       } 
       .item:nth-child(odd) .item__info 
       { 
        padding-right: 1.25rem; /* 20 */ 
       } 
       .item:nth-child(odd) .item__img 
       { 
        padding-left: 1.25rem; /* 20 */ 
       } 
       .item__img 
       { 
       } 
        .item__img 
        { 
         width: 100%; 
         height: 18.750rem; /* 300 */ 
        } 

       .item h2 
       { 
        font-weight: 700; 
        font-size: 1.875rem; /* 30 */ 
        margin-bottom: 0.625rem; /* 10 */ 
       } 
       .item p 
       { 
        line-height: 1.625rem; /* 26 */ 
       }

和該HTML很簡單：

<div class="container" role="main"> 

    <article class="item"> 
     <div class="item__info"> 
      <h2>Header1</h2> 
      <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
     </div> 
     <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div> 
    </article> 
    <article class="item"> 
     <div class="item__info"> 
      <h2>Header2</h2> 
      <p>Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2.</p> 
     </div> 
     <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div> 
    </article> 
    <article class="item"> 
     <div class="item__info"> 
      <h2>Header3</h2> 
      <p>Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3</p> 
     </div> 
     <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div> 
    </article> 
    <article class="item"> 
     <div class="item__info"> 
      <h2>Header4</h2> 
      <p>Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4.</p> 
     </div> 
     <div class="item__img"><img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450"/></div> 
    </article> 



</div>

我創建的jsfiddle的是，它的here。我想實現的效果看起來是like this。這裏出了什麼問題？

來源

2015-04-01 randomuser2

請參閱下面的降低寬度佔空白和邊距。讓我知道如果問題仍然存在。 :)

body { 
 
    font-family: Open Sans, sans-serif; 
 
    padding: 5rem 1.25rem; 
 
    /* 80 20 */ 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
    max-width: 60rem; 
 
    /* 960 */ 
 
    margin: 0 auto; 
 
} 
 
.item { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    margin-bottom: 5rem; 
 
    /* 80 */ 
 
} 
 
.item { 
 
    color: #666; 
 
} 
 
.item__info, 
 
.item__img { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.item:nth-child(even) .item__info { 
 
    float: right; 
 
    padding-left: 1.25rem; 
 
    /* 20 */ 
 
} 
 
.item:nth-child(even) .item__img { 
 
    padding-right: 1.25rem; 
 
    /* 20 */ 
 
} 
 
.item:nth-child(odd) .item__info { 
 
    padding-right: 1.25rem; 
 
    /* 20 */ 
 
} 
 
.item:nth-child(odd) .item__img { 
 
    padding-left: 1.25rem; 
 
    /* 20 */ 
 
} 
 
.item h2 { 
 
    font-weight: 700; 
 
    font-size: 1.875rem; 
 
    /* 30 */ 
 
    margin-bottom: 0.625rem; 
 
    /* 10 */ 
 
} 
 
.item p { 
 
    line-height: 1.625rem; 
 
    /* 26 */ 
 
} 
 
.item__img img { 
 
    width: 100%; 
 
    height: 18.750rem; 
 
    /* 300 */ 
 
}

<div class="container" role="main"> 
 
    <article class="item"> 
 
    <div class="item__info"> 
 
     <h2>Header1</h2> 
 

 
     <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
 
    </div> 
 
    <div class="item__img"> 
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
    </div> 
 
    </article> 
 
    <article class="item"> 
 
    <div class="item__info"> 
 
     <h2>Header2</h2> 
 

 
     <p>Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2.</p> 
 
    </div> 
 
    <div class="item__img"> 
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
    </div> 
 
    </article> 
 
    <article class="item"> 
 
    <div class="item__info"> 
 
     <h2>Header3</h2> 
 

 
     <p>Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3 Text3</p> 
 
    </div> 
 
    <div class="item__img"> 
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
    </div> 
 
    </article> 
 
    <article class="item"> 
 
    <div class="item__info"> 
 
     <h2>Header4</h2> 
 

 
     <p>Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4 Text4.</p> 
 
    </div> 
 
    <div class="item__img"> 
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
    </div> 
 
    </article> 
 
</div>

來源

2015-04-01 16:17:48 w3debugger

如何插入'Run code snippet'？ – 2015-04-01 16:43:04

'1。點擊回答框，然後按CTRL + M'或在工具欄中找到標記圖標:) – w3debugger 2015-04-01 16:59:22

是的，它的工作，非常感謝你:) – randomuser2 2015-04-02 07:37:23

你item__img由該代碼重寫：

.item__img { 
    width: 100%; 
    height: 18.750rem; /* 300 */ 
}

它是100％的寬度insted的的50％之意。

你也應該，如果你想讓它正確對齊它應該看起來像this（注意width: 47%）

來源

2015-04-01 16:16:28

有真多，更簡單的方法來完成你正在嘗試做的。這不是響應式的，但是，應該幫助你朝着正確的方向前進。

例如：

HTML：

<div id="twoColumns"> 
    <h2>Text</h2> 
    <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 

    <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
</div> 

<div id="twoColumns"> 
    <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 

    <h2>Text</h2> 
    <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
</div>

CSS：

#twoColumns { 
 
     -webkit-column-count: 2; /* Chrome, Safari, Opera */ 
 
     -moz-column-count: 2; /* Firefox */ 
 
     /* column counts can be changed for num. of columns */ 
 
     column-count: 2; 
 
    }

<div id="twoColumns"> 
 
     <h2>Text</h2> 
 
     <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
 
     
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
    </div> 
 
    
 
    <div id="twoColumns"> 
 
     <img src="http://i.imgur.com/YV59Utw.jpg" height="275" width="450" /> 
 
     
 
     <h2>Text</h2> 
 
     <p>Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1 Text1</p> 
 
    </div>

小提琴：https://jsfiddle.net/mikeQ/mtn2obmj/

另請參閱鏈接MDN瞭解CSS Columns屬性。

來源

2015-04-01 16:39:25

CSS中的兩列布局 - 每行中的文本和圖像更改順序

回答

相關問題