позиционирование DIV не работает

Я удивлен, почему это ДИВ поплавок дает слишком много пространства на обоих концах. У меня есть родительский DIV и 3 других дочерних DIV. Код CSS ниже:

// Это CSS для родительского DIV.

.row { 
    width: 800px; 
    background:#E3E3E3; 
    height:50px; 
    padding: 5px; 
    border: 2px black; 
    padding-top: 5px; 
}

// Это CSS для среднего DIV.

.element-field { 
    width: 350px; 
    display: inline-block; 
    vertical-align:middle; 
    padding-top: 5px; 
    padding-bottom: 25px; 
}

// Это CSS для левой DIV.

.title-field{ 
    text-align:left; 
    width: 100px; 
    float:left; 
    word-wrap:break-word; 
    position: absolute; 
    left: 0px; 
    border:3px solid #8AC007; 
    padding: 10px; 
}

// Это CSS для правильного DIV.

.comment-field{ 
    text-align:left; 
    width: 100px; 
    display: inline-block; 
    word-wrap:break-word; 
}

// Это HTML документ

<html> 
    <head> 
     <link rel="stylesheet" href="style.css"/> 
    </head> 
    <body> 
     <div class="row"> 
      <div class="title-field"><label>This DIV is giving too much a space at left end and I don't understand why</label></div> 
      <div class="element-field"><input name="lastname" id="lastname" maxlength="15" type="text" class="css-input" placeholder="ENTER LASTNAME" value=""></div> 
      <div class="comment-field">This DIV is giving too much a space at the right end and I don't understand why</div> 
     </div> 
    </body> 
</html>

Как сделать текст вписывается в эти DIVs, не давая эти пробелы и не допустить, чтобы поток текста из DIV, который является серый фон? Ваш профессиональный вклад очень приветствуется.

EDIT: Вот скрипка с кодом при условии: http://jsfiddle.net/ohdjzxb4/

источник

2015-10-30 kehinde

Так что нужно дать 'высота: 50px' к' .row', потому что это то, что делает ваш текст потока снаружи. Также вы используете 'position: absolute' для текстового поля, чтобы изменить его на' relative'. – divy3993

Пожалуйста, настройте рабочий пример, например, на JSFiddle.net – Rvervuurt

Да, пожалуйста, дайте живое демо, чтобы мы могли подробнее узнать ваш запрос. –

Вы можете использовать макет таблицы.

.row { 
 
    width: 800px; 
 
    background:#E3E3E3; 
 
    height:50px; 
 
    padding: 5px; 
 
    border: 2px black; 
 
    padding-top: 5px; 
 
    display: table; 
 
} 
 
.element-field { 
 
    width: 80%; 
 
    display: table-cell; 
 
    vertical-align:middle; 
 
    padding-top: 5px; 
 
    padding-bottom: 25px; 
 
text-align: center; 
 
} 
 
.title-field{ 
 
text-align:left; 
 
width: 20px; 
 
word-wrap:break-word; 
 
border:3px solid #8AC007; 
 
padding: 10px; 
 
    display: table-cell; 
 
} 
 
.comment-field{ 
 
text-align:left; 
 
width: 20%; 
 
    display: table-cell; 
 
word-wrap:break-word; 
 
    vertical-align: middle; 
 
}

<div class="row"> 
 
     <div class="title-field"><label>This DIV is giving too much a space at left end and I don't understand why</label></div> 
 
     <div class="element-field"><input name="lastname" id="lastname" maxlength="15" type="text" class="css-input" placeholder="ENTER LASTNAME" value=""></div> 
 
     <div class="comment-field">This DIV is giving too much a space at the right end and I don't understand why</div> 
 
    </div>

источник

2015-10-30 11:40:46

Совершено в: http://jsfiddle.net/wfo93rwn/

Я надеюсь, что это то, что вы ожидали.

CSS:

.row { 
    width: 800px; 
    background:#E3E3E3; 
    height:150px; 
    padding: 5px; 
    border: 2px black; 
    padding-top: 5px; 
    overflow:auto; 
} 

.element-field { 
    width: 350px; 
    vertical-align:middle; 
    padding-top: 5px; 
    padding-bottom: 25px; 
    float: left; 
} 

.title-field{ 
    text-align:left; 
    width: 100px; 
    float:left; 
    word-wrap:break-word; 
    border:3px solid #8AC007; 
    padding: 10px; 
} 

.comment-field{ 
    text-align:left; 
    width: 100px; 
    word-wrap:break-word; 
    float: right; 
}

источник

2015-10-30 12:02:57 divix

позиционирование DIV не работает

ответ

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