CSS 왼쪽 플로팅 요소가 여러 개 있고 오른쪽 플로트 요소가 두 개 있습니다.

Question

플로트 문제가 있습니다. 다양한 브라우저 너비에 대해 미디어 쿼리를 사용하여 반응 속도가 빠른 사이트를 만들고 있습니다. 페이지가 나타나면 HTML의 흐름과 함께 페이지가 표시되지만 브라우저가 확대되면 img의 오른쪽에 줄 바꿈을 넣기를 원하지만 그 바로 앞에있는 p 요소까지 줄 바꿈합니다. http://jsfiddle.net/tempertemper/MZWD9/12/

나는 넓은 만들기 위해 찾고 있어요이 사이트는 여기에 있습니다 : : 여기

<ul> 
    <li> 
    <h3>Title</h3> 
    <img src="images/image" /> 
    <p>This is some text.</p> 
    <p>Here's some more text.</p> 
    <p>And heres yet another block of text.</p> 
    <blockquote>This is a quote.</blockquote> 
    <a>A link</a> 
    </li> 
</ul> 

내 HTML과 CSS 모양 방법의 예 : http://tempertemper.net/portfolio

내가 여기

는 HTML의 확실한 것을 놓치고있는 것은 확실 합니다만, 나는 그것이 무엇인지 알아 내지 못합니다. float이 두 개의 인접한 요소 만 떠 다니는 지 궁금해지기 시작합니다. 나는 img와 p 태그 주위에 div를 넣을 수 있다고 생각하지만, HTML을 깨끗하게 유지하고 싶습니다.

모든 요소는 너비가 있으며 포함 된 요소에 블록 쿼트가 맞습니다 (예 : li의 너비는 모든 요소와 그 안쪽 여백, 테두리, 여백 등을 포함하기에 충분합니다). 나는 모든 요소를 ​​떠 다니려고했는데, 나는 오른쪽으로 떠있는 blockquote를 bar로 바꾼다. 블록 인용 앞의 요소에 대해 clear : left를 사용하여 시도했습니다. 기쁨이 없습니다.

아무도 나를 바르게 둘 수 있습니까?

고마워요,

마틴.

Answer 1

갖고 계신 HTML을 사용하는 것은 불가능합니다.

문서의 흐름은 HTML 순서로 발생합니다. 즉, 정상적인 상황에서 요소는 이후에 오는 요소 인 HTML에으로 영향을 미칠 수 있습니다. 예를 들어

float: right은 요소를 오른쪽으로 이동시키고 그 다음 요소는 왼쪽으로 이동합니다. clear: left은 요소가 적용되는 요소의 왼쪽으로 흐르는 것을 방지합니다.

I 블록으로 HTML을 깨는, 그 부동 제안 할 수

:

<ul> 
    <li> 
     <h3>Title</h3> 
     <div class="content"> 
      <img src="images/image" /> 
      <p>This is some text.</p> 
      <p>Here's some more text.</p> 
      <p>And heres yet another block of text.</p> 
     </div> 
     <blockquote>This is a quote.</blockquote> 
     <a>A link</a> 
    </li> 
</ul> 

그런 다음 CSS에서 h3, img, p 선택하고 규칙을 제거하고 .content

ul { 
    width: 200px; 
} 
.content { 
    float: left; 
    width: 100px; 
} 
blockquote { 
    float: right; 
    width: 50px; 
} 
a { 
    float: left; 
    clear: both; 
} 

에 대한 유사한 규칙을 대체 할 수

일반적으로 문서 흐름, float, clear 및 position에 대해 읽는 것이 좋습니다. 그들은 지나치게 많이 사용되는 경향이 있으며, 여기에 너무 많이 사용 된 것 같습니다.

아, 그리고 당신을 위해 바이올린 : http://jsfiddle.net/2bedr/1/

Answer 2

모든 요소를 ​​왼쪽으로 배치하여 수평으로 정렬 할 수 있습니다. Check this example.

<ul> 너비를 지정하고 마지막 요소를 오른쪽으로 떠서 부모 요소의 너비에 관계없이 올바르게 유지할 수 있습니다. Another example. 내가 도움을 줄 수 이상이있을 경우

, 내가 업데이트됩니다 :) 의견 후

을, 당신은 직접 IMG 또는 제목 후 인용구를 위해 HTML 구조를 수정해야한다. 그러면 당신이 원하는대로 행동 할 것입니다. Example.

Answer 3

이 솔루션은 매우 간단합니다. 더 간단한 당신은 생각했다.

변화 : 이것에

<ul> 
    <li> 
    <h3>Title</h3> 
    <img src="images/image" /> 
    <p>This is some text.</p> 
    <p>Here's some more text.</p> 
    <p>And heres yet another block of text.</p> 
    <blockquote>This is a quote.</blockquote> 
    <a>A link</a> 
    </li> 
</ul> 

:

<ul> 
    <li> 
    <h3>Title</h3> 
    <blockquote>This is a quote.</blockquote> 
    <img src="images/image" /> 
    <p>This is some text.</p> 
    <p>Here's some more text.</p> 
    <p>And heres yet another block of text.</p> 
    <a>A link</a> 
    </li> 
</ul> 

인용구 첫 번째 진술에 의해 (그리고 그것을 떠 오른쪽) 먼저 바로 떠있는 요소를 말한다. 나는 이것이 논리적이지 않다는 것을 알고있다. 그러나 그것은 바른 대답이다. 나는 여러 번 나 자신을 가지고 있었다.