установить ширину кнопки до 100% родительского div без разрыва строки

Question

У меня есть div, называемый текстом, а рядом с ним Я хочу кнопку, которая должна занимать оставшуюся ширину экрана, поэтому я устанавливаю ширину кнопки 100%, но это занимает 100% экрана и появляется под текстовым div. Как я могу сделать так, чтобы кнопка была на 100% шириной своего родительского div, а не всего экрана, чтобы все это отображалось в одной строке, без установки ширины для текстового div? Вот demo. Спасибо.

CSS

#text{ 
     float:left; 
} 

div{ 
    border:1px solid red;  
} 

button{ 
     width:100%; 
} 

HTML

<div id = "text">text</div> 
<div> 
    <button>button</button> 
</div> 

Answer 1

Вы должны быть в состоянии достичь этого с помощью CSS: display: table-cell

Попробуйте что-то вроде этого: DEMO

<div class="container"> 
    <div class="cell" id="text">text</div> 
    <div class="cell"> 
     <button>button</button> 
    </div> 
</div> 

div.container { 
    width: 100%; 
    display: table; 
} 

div.cell { 
    border:1px solid red; 
    display: table-cell; 
} 

button { 
    width:100%; 
} 

/* use this style to set width of the #text cell to exactly the width of it's cotnents */ 
#text { 
    width:1%; 
    white-space: nowrap; 
} 

Answer 2

Вы должны дать своему родительскому контейнеру ширину. Таким образом, текст может выглядеть примерно так: 80%, тогда div, содержащий button, может составлять 20%. то кнопка будет на 100% от родительского div, и оба divs будут рядом друг с другом.

Answer 3

Так div элемент представляет собой элемент блока. Это означает, что он начнется с новой строки и следующего элемента после того, как он будет также на новой строке. Здесь вы можете установить display: inline-block как у divs, так и у вас.

Если вам не нужен блок-элемент просто использовать встроенный один как span

http://jsfiddle.net/1amvwzuw/3/

Answer 4

Вы можете разместить их в DIV вместе и отображать их как прогибается.

http://jsfiddle.net/1amvwzuw/2/

<div class="flex"> 
    <div id="text">text</div> 
    <button>button</button> 
</div> 

Answer 5

Если ваш браузер-матрица позволяет ему это возможность Perfekt попробовать Flexbox:

HTML

<div class="wrapper"> 
    <div id="text">text</div> 
    <div class="button-wrapper"><button>button</button></div> 
</div> 

CSS

.wrapper{ 
    display: flex; 
} 
.button-wrapper{ 
    flex: 1; 
} 
button { 
    width: 100%; 
} 

http://jsfiddle.net/1amvwzuw/5/

, если не смотреть на этот вопрос, чтобы увидеть, как растянуть DIV с помощью дисплея: стол-элементный: Auto-stretching table-cell div css