바로 - VoidCC

나는 그것이 가장 좋은 예제를보고 설명 생각 부유 사업부 내에서 올바르게 일렬로 된 div의 무리를 얻기 :바로

내 코드 (간체) 문제입니다 오른쪽 div의 직사각형 div가 올바르게 정렬되어 있지 않습니다. 내가 원하는 것은 그들이 왼쪽에서 오른쪽으로 정렬 한 다음 그들이 사업부의 가장자리를지나 갈 때 두 번째 줄에 이월입니다 :

의도 된 모양 :

._______________________________________________________________________. 
    |                  | 
    |        Title         | 
    |                  | 
    | blah blah blah blah blah blah          | 
    |                  | 
    | Ingredient: [    ]  [block] [block] [block] [block] | 
    |          [block] [block] ...    | 
    |                  | 
    |_______________________________________________________________________|

출처

2011-02-12 Razor Storm

변경 :

.ingredient 
{ 
    display:inline-block; 
    ...

그리고 :

.ingredient 
{ 
    display:block; 
    ...

으로 너는 모두 준비가되어있다. 속성의 이름은 꽤 자명합니다.

다음은 피들입니다. http://jsfiddle.net/kV9yn/12/입니다.

출처

2011-02-12 00:13:52 Blender

은 와우가 간단했다><감사합니다! –

문제 없습니다. 그것은 당신이 함께 일하는 매우 멋진 사이트 디자인입니다. – Blender

감사합니다. 전체 디자인은 더 시원 해 보이지만 디버깅을 쉽게하기 위해 내 피들에서 많은 마크 업/CSS를 제거했습니다. =] –

이런 일에 대해 어떻게 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>The divs?</title> 
    <style type="text/css"> 
     h1 { 
      text-align: center; 
     } 
     body { 
      margin: auto; 
      width: 600px; 
     } 
     #blocks { 
      float: left; 
      width: 50%; 
     } 
     .leftFloat { 
      float: left; 
      margin-right: 1em; 
      width: 18%; 
     } 
     fieldset { 
      border: none; 
      float: left; 
      width: 40%; 
     } 
    </style> 
</head> 
<body> 
    <h1>Title</h1> 
    <p>blah blah blah blah blah blah</p> 
    <form> 
    <fieldset> 
     <label for="ingredient">Ingredient:</label> 
     <input type="text" id="ingredient" /> 
    </fieldset> 
    </form> 
    <div id="blocks"> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
     <div class="leftFloat"> 
      [block]</div> 
    </div> 
</body> 
</html>

출처

2011-02-12 00:20:40 mark123

바로

답변

관련 문제