2 양식의 나란히 부풀은

Question

그래서 나는 2 개의 양식을 가지고 있고, 같은 페이지에 등록하고 로그인했다. 이제는 내 양식/레이아웃의 스타일을 지정하고 두 양식이 모두 나란히 배치되기를 바랍니다.

것은 나는이 사용하고 이제부터 :

HTML :

<div class="links"> 
    <h2>Register</h2> 
    <?php include ("register.php");?> 
</div> 

<div class="rechts"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
</div> 

<div class="clearfix"></div> 

CSS :

.links{ 
    float: left; 
    width:50% 
} 
.rechts{ 
    float: right; 
    width: 50%; 
} 

이 작동하지만 올바른 형태가 오른쪽으로 끈적이라고합니다 측면. 내 이미지에서 볼 수 있듯이 많은 공간이 있습니다. 나는 텍스트 정렬을 할 때 : right; 거기, 내 텍스트는 양식에 붙어 있습니다. 그러나 양식은 제쳐두고 싶어하지 않습니다.

이미지 : 당신은 단순히과 같이, 오른손 양식의 특정 폭을 설정할 수

Answer 1

:

.rechts{ 
    float: right; 
    width: 300px; 
} 

가 여기에 바이올린입니다 : 또는

http://jsfiddle.net/CcZXk/

, 오른쪽 div에서 width:50%;을 완전히 제거하면 올바르게 작동 할 수 있습니다. 그러나 div의 내용에 따라 다릅니다. 플로팅 요소는 인라인 요소와 같이 조금씩 작동하지만 가능한 한 작게 만들기 위해 모든 내용을 포함하고 있습니다. 즉, 긴 텍스트 줄이나 긴 이미지 또는 입력란이 div 안에 있으면 div가 너무 넓어서 다음 줄로 감싸기 때문에 width:50%;을 제거하면 작동하지 않습니다.)

Answer 2

너비가 인 너비가 이므로 실제로 올바르게 작동합니다.

변화는/자동에게

.links{ 
    width: auto; 
    float: left; 
} 
.rechts{ 
    width: auto; 
    float: right; 
} 

확인 픽셀이 JSFiddle

Answer 3

.rechts{ 
width:auto; 
margin-right:0; 
float:right; 
overflow:hidden; 
} 

또는 .....

<div class="rechts"> 
    <div class="inner"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
    </div> 
</div> 

.rechts{ 
float: right; 
width: 50%; 
} 
.inner{ 
float: right; 
width:auto; 
margin-right:0; 
} 

Answer 4

대신 당신은 또한 수있는 float 지시어를 사용하여를 사용하십시오. 10. 더 작은 화면 크기에서 가로 스크롤을 피하기 위해 미디어 쿼리 을 스타일 시트에 쉽게 추가하고 display: block으로 다시 변경할 수 있습니다.

는 참조 http://jsfiddle.net/QnDte/

/* CSS */ 
.register, 
.login { 
    display: table-cell; 
} 
.register_and_login { 
    display: table; 
    margin: auto; 
} 

<!-- HTML --> 
<div class="register_and_login"> 
    <div class="register"> 
     <h2>Register</h2> 
     <?php include ("register.php");?> 
    </div> 
    <div class="login"> 
     <h2>Login</h2> 
     <?php include ("login.php");?> 
    </div> 
</div> 

Answer 5

<div class="mainblock"> 
<div class="links"> 
    <h2>Register</h2> 
    <?php include ("register.php");?> 
</div> 

<div class="rechts"> 
    <h2>Login</h2> 
    <?php include ("login.php");?> 
</div> 
</div> 
<div class="clearfix"></div> 

CSS :

.mylinks{ 
    float: left; 
    width:50%; 
} 
.rechts{ 
    float: left; 
    width: 50%; 
} 
.mainblock 
{ 
    width: 1000px; 
    margin:0px auto; 
}