文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS中的两列布局--每行的文本和图像更改顺序

问CSS中的两列布局--每行的文本和图像更改顺序
EN

Stack Overflow用户

提问于 2015-04-01 16:05:49

回答 3查看 952关注 0票数 0

你能帮我，告诉我我的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>

我创造了这个弹琴，它是这里。我想要达到的效果看起来像像这样。这里出了什么问题？

css

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-04-01 16:17:48

请看以下内容。如果问题还在，请告诉我。:)

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>

票数 2

Stack Overflow用户

发布于 2015-04-01 16:39:25

有很多，更简单的方法来完成你想要做的事情。这是没有反应的，但是，应该能帮助你朝着正确的方向前进。

例如：

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列属性。

票数 1

Stack Overflow用户

发布于 2015-04-01 16:16:28

您的item__img被以下代码覆盖：

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

它的宽度是100%，在50%的预期。

你也应该降低宽度，以考虑填充和边距，如果你想要它正确地排列，它应该看起来像这 (注意width: 47%)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29395613

复制

相似问题

问CSS中的两列布局--每行的文本和图像更改顺序
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的两列布局--每行的文本和图像更改顺序EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中的两列布局--每行的文本和图像更改顺序
EN