플로트를 사용하지 않고 두 요소를 함께 배치하십시오.

-1

<html> 
<head> 
<style> 
    #success 
    { 
     color: #f0f0f0; 
     position: relative; 
     top: 3%; 
     left: 50%; 

     padding: 0; 
     margin: 0; 
    } 
    #errors { 
     color: #b81d18; 
     position: relative; 
     top: 3%; 
     left: 15%; 

     padding: 0; 
     margin: 0; 
     } 
</style> 
</head> 
<body> 
if (isset($_POST['login'])) 
{ 
    $username = trim($_POST['login_username']); 
    $password = trim($_POST['login_password']); 

    $login = login($username, $password); 
    if ($login === FALSE) 
    { 
     $errors[] = 'That username/password combination is incorrect.'; 
     $errors_1 = output_errors($errors); 
     echo "<div id='errors'> $errors_1</div>"; 
     $success[] = "You are logged in as a guest"; 
     $success_1 = output_errors($success) 
     echo <div id='success'>$success_1</div> 
    } 
} 

<form id="password_form" action="" method="post"> 
    Username: </br> 
    <input type="text" name="login_username" value="<?php echo $_POST['login_username']; ?>"> 
    </br> 
    Password:</br> 
    <input type="password" name="login_password"> 
    </br> 
    <input type="submit" name="login" value="Log in"> 
</form> 
</body> 
</html>

위 코드는 내 코드입니다. 나는 오류 div와 success div를 나란히 표시 할 수 있기를 원합니다. float을 사용할 수없는 이유는 오류 또는 성공 div가 출력 될 때 양식이 아래로 이동하고 오류가 양식 위에 표시되기 때문입니다. float를 사용하면 오류 div가 표시 될 때 양식이 더 이상 아래로 이동하지 않으며 해당 양식이 표시되지 않게됩니다. 두 div가 분리 된 이유는 각 div가 자체 색상을 가지고 있기 때문입니다. 이 작업을 수행하는 방법이나 모든 오류 및 성공 메시지를 하나의 배열에 저장하는 방법에 대한 제안은 있지만 출력시 해당 색을 제공합니다.플로트를 사용하지 않고 두 요소를 함께 배치하십시오.

출처

2015-01-02 Naeem Ahmed

어떻게 동시에 로그인에 성공하고 오류가있을 수 있습니까? – Halcyon

둘 다 포함 된 div를 만들려고 했습니까? 그런 다음 그 div의 오른쪽에 하나를 넣으십시오. – kainaw

부트 스트랩을 사용하고 그리드 시스템을 사용할 수 있습니다. – Core

div에 display: inline-block을 사용해보세요. 이처럼 :

#success 
{ 
    display: inline-block; 
    color: #f0f0f0; 
    position: relative; 
    top: 3%; 
    left: 50%; 

    padding: 0; 
    margin: 0; 
} 
#errors { 
    display: inline-block; 
    color: #b81d18; 
    position: relative; 
    top: 3%; 
    left: 15%; 

    padding: 0; 
    margin: 0; 
}

출처

2015-01-02 19:49:57

당신은 float 잘 사용할 수 있습니다. 응답 메시지의 플로트를 모두 지울 필요가 있습니다.

#password_form { 
    clear: left; 
}

전체 예를 플로트과 :

다음은 키 ingrediant입니다. #error DIV 또는 #success DIV를 제거하면 모든 것이 그대로 유지됩니다.

#success, #errors { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#success { 
 
    background-color: #f0f0f0; 
 
} 
 
#errors { 
 
    background-color: #b81d18; 
 
    } 
 
#password_form { 
 
    clear: left; 
 
}

<!-- comment out or remove one of the DIVs below to test --> 
 
<div id="success">Success</div> 
 
<div id="errors">Error</div> 
 

 
<form id="password_form" action="" method="post"> 
 
    Username: </br> 
 
    <input type="text" name="login_username" value=""> 
 
    </br> 
 
    Password:</br> 
 
    <input type="password" name="login_password"> 
 
    </br> 
 
    <input type="submit" name="login" value="Log in"> 
 
</form>

출처

2015-01-02 19:56:14 hungerstar

플로트를 사용하지 않고 두 요소를 함께 배치하십시오.

답변

관련 문제