Развернуть div вправо при росте дочернего элемента абзаца

#html #css

#HTML #css

Вопрос:

Если у меня есть абзац внутри div, можно ли сделать так, чтобы div расширялся влево, а не вправо, когда абзац становится длиннее? Я знаю, что для этого есть несколько потоков, и я пробовал использовать direction: rtl и т. Д., Но, похоже, у меня ничего не работает.

Вот некоторый код.

https://codepen.io/haa123/pen/oNxaqwE

HTML:

 <div id="container">  
  <div id="container1">
    <p>Lorem ipsum</p>
</div>
<br>
<div id="container2">
    <p>Expanding to the right</p>
</div>

CSS:

 #container {
  position: absolute; left: 50%;
}

#container1 {
  background-color: red;
  display: inline-block;
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

Вот несколько фотографий для иллюстрации.

Это то, что у меня есть на данный момент:

Два красных прямоугольника с левой стороны

Это то, чего я хочу достичь:

Два красных прямоугольника с правой стороны

Спасибо!

Ответ №1:

 .bricklet {text-align: right}
.bricklet .content {display: inline-block}
.bricklet .content.hidden {display: none}

<div class="bricklet">
  <div>Expander</div>
  <div class="content hidden">Expanded content</div>
</div>

Ответ №2:

используйте сетку css:

 <div class='container'>
  <div></div>
  <div><p>lorem ipsum</p></div>
  <div><p>expand</p>
</div>

1. Это похоже на ответ, связанный с CSS; можете ли вы опубликовать некоторые из них?

2. Я бы тоже хотел увидеть здесь немного CSS.

3. или гибкий блок: #container { позиция: абсолютная; слева: 50%; отображение: гибкий; направление сгибания: столбец; выравнивание-элементы: гибкий конец; } #container1 { цвет фона: красный; отображение: встроенный блок; } #container2 { верхнее поле: 5 пикселей;цвет фона: красный; отображение: встроенный блок; }

4. Я настоятельно рекомендую этот курс по udemy: udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass

Ответ №3:

Вы можете использовать гибкое отображение в своем контейнере

 #container {
  position: absolute; 
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#container1 {
  background-color: red;
  display: inline-block;
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

 <div id="container">  
  <div id="container1">
        <p>Lorem aaabcdedfqafasafasfafasf</p>
    </div>
    <br>
    <div id="container2">
        <p>Expanding to the right asadasdsaqweqweqweqe</p>
    </div>
</div>

1. Вчера я играл с flex, и, похоже, это был правильный путь. Большое вам спасибо!

2. Но возможно ли это сделать только с одним элементом внутри основного контейнера? Если я удалю container1, он не будет работать.

3. Хотя мой ответ неправильный, я хочу объяснить, почему он не работает только с одним элементом внутри контейнера, это потому, что я забыл установить ширину для контейнера, который использует position absolute combine с display flex, ширина должна быть установлена для его работы. Вы можете прочитать документацию об абсолютной позиции в display flex здесь .

Ответ №4:

Я не знаю, почему вы использовали Position:absolute; , но если это действительно необходимо использовать, просто указав text-aligen: right; ваш #container , ваш абзац будет rtl.

 #container {
  position: absolute;
  left: 50%;
  text-align: right;
}

#container1 {
  background-color: red;
  display: inline-block;
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

 <div id="container">
  <div id="container1">
    <p>Lorem ipsum</p>
  </div>
  <br>
  <div id="container2">
    <p>Expanding to the right</p>
  </div>