Поместите два элемента вместе без использования поплавка

-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 и успех div бок о бок. Причина, по которой я не могу использовать float, заключается в том, что при выводе ошибки или результата успеха форма перемещается вниз, а ошибка отображается над формой. Если я использую float, тогда форма больше не перемещается вниз, когда отображается div с ошибкой, и я не хочу, чтобы это произошло. Причина, по которой они являются двумя отдельными div, состоит в том, что каждый div имеет свой собственный цвет. Любые предложения о том, как это сделать, или способ помещать все сообщения об ошибках и успешных сообщениях в один массив, но при их выводе их цвета.Поместите два элемента вместе без использования поплавка

источник

2015-01-02 Naeem Ahmed

Как может быть успешной регистрации и ошибки в то же время? – Halcyon

Вы пробовали сделать div, который содержит их обоих. Затем положите один слева и один справа от этого div. – kainaw

Вы можете использовать бутстрап и использовать систему сетки. – Core

Пробуйте использовать display: inline-block на div. Пример:

#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 просто отлично. Вам просто нужно очистить поплавок от ваших ответных сообщений.

Вот ключ ingrediant:

#password_form { 
    clear: left; 
}

Полный пример с поплавка. Удалите #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

Поместите два элемента вместе без использования поплавка

ответ

Смежные вопросы