如何在此 css 布局中平等地对齐左右内容答案

【问题标题】：How to align left and right content equally in this css layout如何在此 css 布局中平等地对齐左右内容
【发布时间】：2017-01-03 10:58:19
【问题描述】：

我有一个网站，当窗口大小调整为移动设备大小时，我想保留此布局（数据之间有边框）。一切正常，右列中最多有 10 个字符，但是当超过这个值时，它会跳转到新行，并且内容不再与左侧的数据对齐。如您所见，“First | Lorem Ipsum”保持良好对齐，但“Second | Here's some更广泛的内容 Lorem Ipsum”扰乱了整个布局。有没有办法以某种方式解决它？

这里是 Codepen 的链接：http://codepen.io/anon/pen/MJWjJJ?editors=1100

.view__content--info p {
    font-weight: bold;
}

.view__content--border {
    border-left: 1px solid grey;
}

<div class="row">
  <div class="col-md-8">
    <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
      <p>First</p>
      <p>Second</p>
      <p>Third</p>
      <p>Fourth</p>
      <p>Fifth</p>
      <p>Sixth</p>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
      <p>Lorem Ipsum</p>
      <p>Here's some wider content Lorem Ipsum</p>
      <p>Hello World</p>
      <p>Ipsum</p>
      <p>Something</p>
      <p>Here</p>
    </div>
  </div>
</div>

【问题讨论】：

你正在做的方式不是获得你想要的东西的好选择。改变html结构。
您可以强制文本保持在一行中，但这不是一个好的解决方案，恕我直言...
你可以设置.view__content--border { white-space: nowrap;} 但是我之前同意大家的cmets

标签： html twitter-bootstrap css

【解决方案1】：

当您使用引导程序时。我建议你使用描述列表。它会给你你想要的。

仅供参考：当您使用列类时，例如 .col-md-3 ，请始终使用行并将列放入其中

 <dl class="dl-horizontal"> 
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd> 
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd> 
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd> 
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

【讨论】：

【解决方案2】：

您可以这样尝试：为每个项目创建一个新行。当宽度太小并创建新行时，两列都会向下移动，而不是仅右列。

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
        <p>First</p>        
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
        <p>Lorem Ipsum</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
        <p>Second</p>        
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
        <p>Here's some wider content Lorem Ipsum</p>
      </div>
    </div> 
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
        <p>Third</p>        
      </div>
      <div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
        <p>Hello World</p>
      </div>
    </div>
  </div>
</div>

【讨论】：