CSS 포지셔닝 : 부동 왼쪽 행 다음 블록 아래

왼쪽에서 오른쪽으로 블록 행이 있고 그 다음 블록이 있어야합니다.CSS 포지셔닝 : 부동 왼쪽 행 다음 블록 아래

다음은 브라우저에서 렌더링 된 것을 보여줍니다. Desired rendering of HTML

테이블이 아닌 CSS로 모든 위치 지정을 수행해야합니다. 여기

fieldset 
{ 
    float: left; 
    display: block; 
    width: 17em; 
    margin: 0 1em 1em 0; 
    padding: 0 1em 1em 1em; 
} 

fieldset.radio input 
{ 
    clear: both; 
    float: left; 
    width: auto; 
} 

input 
{ 
    display: block; 
    width: 15em; 
} 

label 
{ 
    display: block; 
    margin-bottom: 1em; 
    font-weight: bold; 
} 

label.first 
{ 
    padding-top: 1em; 
}

나는 그것을 읽을 방법 ... 내 HTML 내 CSS ...

<!DOCTYPE html> 
<html> 
<head><link rel="stylesheet" href="demo.css" /><head> 

<body> 

<form action=""> 
    <fieldset> 
    <legend>Field set A</legend> 
    <label for="password">Password 
     <input id="password" name="password" type="text" value="my password" /> 
    </label>    
    </fieldset>    
    <fieldset class="radio"> 
    <legend>Chaining mode</legend> 
     <label for="chain-cfb"> 
      <input id="chain-cfb" name="chain" type="radio" />CFB 
     </label> 
     <label for="chain-cbc"> 
      <input id="chain-cbc" name="chain" type="radio" />CBC 
     </label> 
    </fieldset>    
</form> 

<hr /> 
<p style="padding-top: 1em;">Some text underneath</p> 
</body> 
</html>

은 ... 여기 demo.css의 내용입니다,해야 원하는 받고있을 이 코드로 결과. 그렇지만 난 아니야. 여기

Actual rending of HTML

가 어떤 변경이 명시된 원하는 결과를 얻기 위해 내 HTML/CSS를 할 수 있도록해야합니까 .... 대신 렌더링 무엇인가?

출처

2012-11-29 Sean B. Durkin

청산이없는 방법은 다음과 같습니다

form { overflow: hidden; }

나는 보통 부동 요소

을 floatbox라는 클래스를 만들고 포함하는 모든 컨테이너에 이것을 사용

.floatbox { overflow: hidden; }

일치하는 HTML은 다음이다

<form class="floatbox" action=""> 
    <fieldset><p>I'm floating</p></fieldset> 
    <fieldset><p>me too</p></fieldset> 
</form>

출처

2012-11-29 12:34:10 apparat

니스, 네가 할 수 있다는 것을 몰랐어! –

추가 :

hr { 
    clear: left; 
}

스타일 시트에 당신의 수레를 지 웁니다. 이 양식은 실제로 내부의 요소로 많은 공간을 차지 보장

<form action=""> 
    <fieldset> 
    <legend>Field set A</legend> 
    <label for="password">Password 
     <input id="password" name="password" type="text" value="my password" /> 
    </label>    
    </fieldset>    
    <fieldset class="radio"> 
    <legend>Chaining mode</legend> 
     <label for="chain-cfb"> 
      <input id="chain-cfb" name="chain" type="radio" />CFB 
     </label> 
     <label for="chain-cbc"> 
      <input id="chain-cbc" name="chain" type="radio" />CBC 
     </label> 
    </fieldset> 
    <div style="clear:both"> </div>  
</form>

출처

2012-11-29 12:31:51 Turnip

매우 빠른 답변입니다. 감사. –

당신은 늙은 '더미 청산 요소 트릭을 사용할 수 있습니다.

hr을 단순히 지우는 문제는 너비와 높이가 0인데 양식에 스타일을 적용해도 문제가 될 수 있습니다.

출처

2012-11-29 12:32:11

좋은 답변입니다. 감사. 나는이 답 중 기술적으로 가장 좋은 답을 실제로 알지 못하므로 모두 시험해 보겠습니다. –

<hr /> 요소에서 부동 소수점을 지워야합니다. hr { clear: left; }

출처

2012-11-29 12:32:31 patman

CSS 포지셔닝 : 부동 왼쪽 행 다음 블록 아래

답변

관련 문제