Сделать левым div заполнить оставшееся пространство

Основано на this post Я пытаюсь сделать левый div, чтобы заполнить оставшееся пространство, слева и справа всегда должно быть в одной строке, где правый div должен быть полностью виден.Сделать левым div заполнить оставшееся пространство

Как это осуществить?

#left { 
 
    width: 100%; 
 
    background-color: #ff0000; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    float: left; 
 
} 
 
#right { 
 
    float: right; 
 
    background-color: #00FF00; 
 
}

<body> 
 
    <div> 
 
    <div id="left"> 
 
     left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor 
 
    </div> 
 
    <div id="right"> 
 
     this text is dynamic - should be fully visibile 
 
    </div> 
 
    </div> 
 
</body>

Edit:

Flex-бокс ответ не работает. Похоже, что если зеленый текст становится короче:

То, что я хочу, это зеленый ДИВ стать меньше сейчас, когда текст короток.

источник

2016-11-17 Alex

Вы хотите, чтобы оба div в одной строке? почему нет float на левом div? –

Да точно ... добавил float влево, не помогает – Alex

Это легко, если вы выбираете для flexbox - см демонстрационных ниже:

Добавить display: flex в свою обертку и удалить поплавок s
Добавить white-space:nowrap в right

.wrapper { 
 
    display:flex; 
 
} 
 
#left { 
 
    width: 100%; 
 
    background-color: #ff0000; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    flex:1; 
 
} 
 
#right { 
 
    background-color: #00FF00; 
 
    white-space: nowrap; 
 
}

<div class="wrapper"> 
 
    <div id="left"> 
 
    left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor 
 
    </div> 
 
    <div id="right"> 
 
    this text is dynamic - should be fully visibile 
 
    </div> 
 
</div>

источник

2016-11-17 09:12:10 kukkuz

Кажется не работает, см. Мое редактирование на вопрос и скриншот. – Alex

@Alex не могли бы вы еще раз проверить его работу! – kukkuz

Thank you - Awesome! – Alex

Вы можете использовать CSS Flexbox.

Сделать родительский <div> использование биоэтанол контейнера с помощью display: flex; и дать как #left & #rightflex: 1;

Посмотри ниже фрагмент коды:

.holder { 
 
    display: flex; 
 
} 
 

 
#left { 
 
    flex: 1; 
 
    background-color: #ff0000; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
#right { 
 
    flex: 1; 
 
    background-color: #00FF00; 
 
}

<html> 
 

 
<head> 
 
    <title>This is My Page's Title</title> 
 
</head> 
 

 
<body> 
 
    <div class="holder"> 
 
    <div id="left"> 
 
     left text should have the remaining width and shortended if it is too long lorem ipsum minion dolor 
 
    </div> 
 
    <div id="right"> 
 
     this text is dynamic - should be fully visibile 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Надеется, что это помогает!

источник

2016-11-17 09:12:17

Сделать левым div заполнить оставшееся пространство

ответ

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