Question

我有一堆<ul>我要设置为float:left。我希望我的div .title可以放在<ul>之后的新行上，而不会有相对于前一个<ul>＆＃39应用的浮动属性; S。我怎样才能做到这一点？

这是小提琴：

这是我的代码：

CSS：

＆＃13;

    .center-div ul {
       float: left;
       width: 245px;
     }

    .title{
      position:relative;
      width:100%;
      left:0px; 
      top:140px;
     } 

HTML:

＆＃13;

    <div class='center-div hidden'> 
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <div class="title">My title hopefully left justified</div>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

＆＃13;

Answer 1

.title{display:block;clear:both}  /* and no more property like as relative position */

Answer 2

我使用了你的JSFiddle并使其正常工作：

    .center-div {
      background: #cfcfcf;
      width: 100%;
      margin-top: 40px;
      display: block;
    }

   .center-div {
      overflow: hidden;
      padding: 15px;
    }

    .center-div ul {
      float: left;
      width: 245px;
    }
    .title{
      clear: both;
    }

当你使用clear: both;时，我不想在我的html组件的左侧和右侧看到任何内容。

如果没有其他元素浮动</div>，则不能将<div>放在新行上

2 个答案: