浮动左侧的Bootstrap元素下降

时间:2014-10-16 09:42:23

标签: css twitter-bootstrap

我有以下基于Bootstrap的代码: http://www.bootply.com/7CrOKKpXGv

HTML:

<div class="col-md-8">
  <div class="logo-bag">
  </div>
  <div class="store-description">
      <div class="description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis mauris ac laoreet sagittis. Suspendisse ultricies tincidunt convallis. Nam in varius odio, ac ultrices turpis. Sed urna libero, mattis sit amet lacus eget, varius vulputate felis. Nullam finibus, erat sed pharetra sagittis, metus neque tincidunt enim, ut malesuada leo lorem lacinia ex. Praesent convallis dolor porta nibh luctus congue. Nunc nec diam dui. Vestibulum rhoncus orci at ligula porttitor, at varius tellus elementum. Morbi pulvinar tellus nisl, non pulvinar erat egestas a. Ut bibendum libero ex, sagittis accumsan neque vestibulum eu. Cras tincidunt mollis dolor in posuere. Vestibulum dignissim fermentum aliquet. Fusce consequat urna arcu, et varius dolor imperdiet commodo. Integer at est elit. Sed pulvinar ipsum est, eu mollis est accumsan varius. Proin iaculis nec tortor eu ullamcorper. Maecenas condimentum tincidunt quam efficitur porttitor. Ut molestie venenatis sapien, in laoreet ex interdum nec. Ut ac urna placerat, consequat augue id, porttitor mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel congue diam. Pellentesque sit amet risus efficitur, accumsan purus sed, laoreet massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac ligula et dui blandit consectetur quis pellentesque turpis. Etiam venenatis vel quam eget congue. Curabitur mauris enim, pellentesque et felis ac, tempor hendrerit est. Fusce eget molestie risus. Morbi et odio ipsum. Morbi eleifend imperdiet quam, in auctor leo ultrices ac. Nam congue nulla id tempus vestibulum. Duis lacinia condimentum sollicitudin. Integer tempus nisi vel porttitor pellentesque. Sed rutrum sodales ipsum, sed suscipit sem egestas vel.Pellentesque molestie augue id dui euismod pulvinar. Quisque tristique lectus nulla, in pretium lectus pretium eu. Fusce sed mauris aliquam, dictum felis at, congue magna. Cras varius lacus nec orci molestie cursus. Proin accumsan eleifend nulla vel sollicitudin. Pellentesque ullamcorper nisi arcu, in ornare felis volutpat sit amet. Nulla feugiat consequat sem at fringilla.</p>
      </div>
  </div>
</div>
<div class="col-md-4">
  Right Sidebar
</div>

CSS:

.logo-bag {
  width: 346px;
  height: 228px;
  float: left;
  position: relative;
  background:#000;
}
.store-description {
  float: left;
  margin-top: 20px;
  width:100%;
}
.description {
  position: relative;
  overflow: hidden;
  height: 70px;
  background:red;
}
.description > p {
  font-size: 13px;
  color: #FFF;
  text-align: justify;
}
.col-md-4{
  background:#888;
}
.col-md-8{
  background:#CCC
}

我希望div.store-description保持在div.logo-bag的右侧,无论浏览器维度如何。 该段落不会自动调整宽度,因此在调整浏览器大小时它会下降(在这种情况下,您不需要调整浏览器的大小,因为我没有为段落设置最大宽度) 我该如何解决?

0 个答案:

没有答案