여러 리의 좌우 부동

여러 리의 좌우 부동

워드프레스에서 커스텀 사이드바를 만들고 모든 요소와 정보를 li로 표시하려고 합니다.제가 하려는 것은 전체 li의 절반을 왼쪽으로, 절반을 오른쪽으로 옮기는 것입니다.

내가 사용하고 있는 것은 플로트/클리어 좌우로, 내가 원하는 대로 동작하지 않는 것 같다.

HTML 구조:-

<ul>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
    <li class="right">Right</li>
</ul>

CSS:-

.left { float:left; width:50%; clear:left; }
.right { float:right; width:50%; clear:right }

jsFiddle

브라우저에 따라 목록 스타일 디스크를 포기하려는 경우 부동하거나 마크업을 수정하지 않고도 쉽게 이 작업을 수행할 수 있습니다.

http://jsfiddle.net/Duejc/2/

ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

케이스에 따라서는, 이렇게 브레이크를 밟아 주세요.

<ul class="left">
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
    <li>Left</li>
</ul>

<ul class="right">

    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
    <li>Right</li>
</ul>

.left{
float: left;
width: 50%; }

.right{
float: right;
width: 50%; }

또는 @Xander의 말대로 합니다:)

HTML을 Shuffle 합니다.요소는 다음과 같습니다.cleared는 이전에 플로팅된 요소에 대해 그렇게 합니다.이 경우, 다섯 번째 요소를 클리어하는 것은 여섯 번째 요소입니다.

<ul>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
    <li class="left">Left</li>
    <li class="right">Right</li>
</ul>

jsFiddle

심플한 마크업과 스타일 http://codepen.io/ruinunes/pen/bpgpZV로 실현.

HAML:

%ul.chat
  %li.stamp 
    Saturday
    %span 20:32
  %li.left Who is it?
  %li.right It's Little Nero's, sir. I have your pizza.
  %li.left Leave it on the doorstep and get the hell outta here
  %li.stamp 
    Saturday
    %span 20:33
  %li.right Okay, but what about the money?
  %li.left What money?
  %li.right Well, you have to pay for your pizza, sir.
  %li.left Is that a fact? How much do I owe you?
  %li.left Keep the change, ya filthy animal!
  %li.right Cheapskate.

SCSS

ul.chat {
  font-family: sans-serif;
  list-style:none;
  margin: 0 auto;
  padding: 0;
  width: 50%;

  li {
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 8px;
    padding: 10px;

    &.left { 
      background: #e3e3e3;
      float:left;
      margin-right: 50%;
      width:50%;
      border-top-left-radius: 0;
    }

    &.right {
      background: #6CCE66;
      color: #fff;
      float: right;
      width: 50%;
      border-top-right-radius: 0;
    }

    &.stamp {
      color: #666;
      font-size: 80%;
      text-align: center;
      width: 100%;
      span {
        color: #999;
      }
    }
  }

}

언급URL : https://stackoverflow.com/questions/15744466/floating-multiple-lis-left-and-right