Creating paragraph layout

How to set two of paragraphs to the very left and two paragraphs to the very right-side? The paragraphs are nested in one div.

Here is what i done so far

.advantages p {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 3px;
}

.advantages p:nth-child(3) {
  position: relative;
  left: 550px;
  top: -20px;
}

.advantages p:nth-child(5) {
  position: relative;
  left: 550px;
  top: -20px;
  width: 80%;
}

<div class="advantages">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>

</div>

---

Here's a simplified version of what you're going for in your code.

.advantages p {
    width: 45%;
    float: left;
    border: dashed 1px red;
}

.advantages p:nth-child(even) {
    float: right;
}

One thing you were missing is setting the width of the paragraphs. Things will look a little goofy when the lines of text in a paragraph are different, but this is (an) answer to your question.

Fiddle: https://jsfiddle.net/stgermaniac/wa1w319z/

链接地址: http://www.djcxy.com/p/75992.html

上一篇: 柔性容器内的粗体文本不以内联方式显示

下一篇: 创建段落布局