Я пытаюсь получить поле ввода, чтобы растянуть ширину доступной ширины экрана, оставив 30px div плавающим прямо в той же строке. У вас проблемы с этим.Получение 100% разделов и входов для отображения по горизонтали
<div style="overflow:hidden;">
<div style="float:left;">
<input type="text" style="width:100%;">
</div>
<div style="float:right; width:30px; border:1px solid red;">
@
</div>
</div>
Один из способов заключается в использовании CSS calc():
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width:100%;
margin:0;
}
#parent {
overflow:hidden;
width:100%;
}
#parent>div:first-child {
float:left;
width: calc(100% - 30px);
}
#parent>div:first-child>input {
width:100%;
}
#parent>div:first-child+div {
float:right;
width:30px;
border:1px solid red;
}<div id="parent">
<div>
<input type="text" />
</div>
<div>@</div>
</div>Другой способ заключается в использовании display:table/table-cell:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
width:100%;
margin:0;
}
#parent{
display:table;
table-layout: fixed;
width: 100%;
}
#parent>div{
display:table-cell;
}
#parent>div:first-child{
width:100%;
}
#parent>div:first-child+div{
width:30px;
}
#parent>div:first-child>input{
width:100%;
}<div id="parent">
<div>
<input type="text" />
</div>
<div>@</div>
</div>Табличные ячейки отсортированы. Благодарю. –
Я смущен, почему вы не просто полностью позиционировали дальнюю границу заполняющего предмета относительно далекой границы, а затем фиксированную ширину в соответствии с ее шириной. Нет причин подделывать таблицу, чтобы сделать эту работу. Для этого является абсолютное позиционирование, а calc() - кошмар переносимости. –
Ну, мне лично не нравится использовать 'absolute', потому что они выходят из потока _ document. Что касается поддержки 'display: table/table-cell', она работает только [не работает] (http://caniuse.com/#feat=css-table) в IE7. Даже [calc()] (http://caniuse.com/#feat=calc) имеет хорошую поддержку, если вам не нужно использовать lte IE8. – Vucko
Вам нужен внешний контейнер, который устанавливает положение и ширину. Тогда абсолютно положение внутри него. Затем установите один справа в соответствии с его правильным положением и шириной; один слева по бокам.
<div style="position:relative; width: 100%; height: 2em;">
<div style="position: absolute; right: 0; width: 30px; top: 0; bottom: 0;">...</div>
<div style="position: absolute; left: 0; right: 30px; top: 0; bottom: 0;">...</div>
</div>
Спасибо за ваш ответ, но вы смущены тем, что я пытаюсь сделать. –
Мой ответ делает то, что делает ваш принятый ответ, не оставляя CSS1, намного меньше кода, быстрее. Попробуйте, прежде чем отказываться. Или нет. (shrug) –
Может также после того, что один это повозился ...
<input type="text"><div>@</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input[type="text"] {
width: calc(100% - 30px);
}
div {
width: 30px;
float: right;
border: 1px solid red;
}
Вы можете сделать это с помощью плавающих только @ символа, и установив одинаковый запас для input контейнера.
.input-group {
overflow: hidden;
}
.input-group .input {
margin-right: 30px
}
.input-group input {
box-sizing: border-box;
display: block;
width: 100%;
}
.icon {
float: right;
width: 30px;
text-align: center;
}<div class="input-group">
<div class="icon">@</div>
<div class="input">
<input type="text">
</div>
</div>если один DIV 100% ширины экрана, как вы себе другой DIV фитинг на одной и той же линии? Единственное, что имеет смысл, это установить их как проценты, равные 100%.
<div style='width:90%;'>
<input type="text" style="width:100%;">
</div>
<div style='width:10%;'>@</div>
Er, плавая, как он сказал. Или устанавливая свои позиции. Или сделать их встроенным блоком или ячейкой таблицы отображения. Или используйте calc(). Или любое другое. –
Я забыл, что 100% фактически не означает всю строку –
и Джон, ваш ответ не делает входной div 100% шириной в соответствии с его инструкциями. –
Что не так? Я не уверен, что вы спрашиваете. – Bioto
Я хочу, чтобы ширина поля ввода была такой же широкой, как ширина экрана, до того, как 30px div отобразится вправо. –