Высота элемента зависит от родителя, а не от содержимого?

У меня есть 3 контейнера, один общий (красная граница) и внутри него у нас есть левый (Желтая граница, содержащая изображение) и правый (Синяя граница, содержащая текст).

Левое установлено к грубо 30%, с поплавком: левый; пока право установлено к 70% с поплавком: правый;

Теперь, то, что я пытаюсь достичь следующее: Я хочу, чтобы у обоих была высота Total, в то время как total все еще каким-то образом зависит от контента-так что я могу центрировать положение содержимого как слева, так и справа в середине Total (Red) с маржой-сверху, маржой-снизу = auto;

1) я не могу поставить фиксированную высоту на Total, которая действительно фиксирует высоту, но содержимое разливается, когда узкое (в противном случае это просто смешно пусто).

2) Вот видео элементов, чтобы получить четкую картину того, что я пытаюсь достичь. Я также предпочел бы, чтобы не было js. https://my.микстейп.moe / kxoobz.webm

1 ответ

  1. Вы можете использовать flexbox для достижения желаемого:

    .total {
      display: flex;
    }
    
    .red {
      border: 2px solid red;
      flex: 1 0 30%; /* fill 30% width */
    }
    
    .yellow {
      border: 2px solid yellow;
      flex: 1 0 70%;
    }
    <div class="total">
      <div class="red">
        <img src="http://placehold.it/150x150">
      </div>
      <div class="yellow">
        Quisque porttitor, ipsum vel elementum ultricies, magna arcu scelerisque massa, et laoreet elit felis nec urna. Praesent suscipit leo at ullamcorper rutrum. Suspendisse potenti. Phasellus pretium mauris id lacus dapibus finibus. Nunc placerat est quis nisi aliquet, ac aliquet leo sagittis. Donec quis aliquet neque. Suspendisse potenti. In vestibulum nisl ut risus fermentum tempor sed at arcu. Aenean at ante turpis. Integer nec dolor placerat diam vulputate consequat. Cras consectetur mi scelerisque massa accumsan auctor. Nunc imperdiet lacus eget justo luctus molestie. In dignissim lectus eget feugiat tincidunt. Vestibulum tempus est risus, eget suscipit turpis molestie id.
      </div>
    </div>