Внук гибкого дивана на полную высоту - PullRequest
Новая
       12

Внук гибкого дивана на полную высоту

0 голосов
/ 11 июля 2019

Я работаю над адаптивным макетом на основе столбцов, где каждый столбец содержит текст разной длины. Я использую сетку начальной загрузки, чтобы получить отзывчивость, но у меня проблема с настройкой высоты внутреннего div для каждого столбца в полноэкранном режиме. Мне нужно, чтобы что-то похожее на эту картинку было заимствовано из аналогичного вопроса переполнения стека .

enter image description here

Решения, которые я мог найти, не работают в моем случае, так как я имею дело с высотой внука внешнего.

Ниже приведена упрощенная версия кода HTML и CSS. (Я удалил ненужные стили и теги для этого примера.) Мне нужна высота div ".campaign-description", чтобы взять полную высоту div ".campaign-block".

Возможно ли это сделать с помощью этого макета? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
        .align-center {
            text-align: center;
        }

        .grid {
            display:flex;
        }

        @media screen and (max-width: 450px){
            .grid {
                display : block;
            }
        }

        .campaign-block {
            flex:1;
            border: 1px solid;
        }

        .campaign-description {
            flex:1;
            background-color: #a05b4e;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <section>
        <div class="row">
            <div class="col-sm-12 align-center">
                <div class="align-center">
                    <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
                </div>
                <div class="row grid">
                    <div class="col-xs-12 col-sm-6 align-center campaign-block">
                        <div class="st-smc-offer-image">
                            <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
                        </div>
                        <div class="campaign-description">
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            <div>
                                <a href="http://google.com">Do smth</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 align-center campaign-block">
                        <div class="st-smc-offer-image">
                            <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
                        </div>
                        <div class="campaign-description">
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            Text <br />
                            <div>
                                <a href="http://google.com">Do smth</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

Ответы [ 2 ]

1 голос
/ 11 июля 2019

Насколько я знаю, Flexbox работает только между родителем и ребенком, а не между родителем и внуком. Это означает, что Flexbox, установленный на <div class="row grid">, напрямую не влияет на его внука, <div class="campaign-block">.

Чтобы .campaign-description занял оставшееся пространство снизу, вы можете ввести Flexbox на .campaign-block и установить flex-direction: column, чтобы его дочерние элементы отображались сверху вниз.

Тогда .campaign-description должен занять оставшееся место внизу, потому что flex: 1, или flex-grow: 1, скажет ему расширяться. 

.align-center {
    text-align: center;
}

.grid {
    display: flex;
}

.campaign-block {
    /* Introduce Flexbox */
    display: flex;
    
    /* By default, flex-direction is set to row. I changed it to column
       because I wanted the children of .campaign-block to display from
       top to bottom. */
    flex-direction: column;
    flex: 1;
    border: 1px solid;
}

.campaign-description {
    /* Since you have flex: 1, .campaign-description will take up the
       remaining space on the bottom. */
    flex: 1;
    background-color: #a05b4e;
    color: #ffffff;
}

@media screen and (max-width: 450px){
    .grid {
        display: block;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<!-- Removed indentations to improve readability -->

<section>
<div class="row">
<div class="col-sm-12 align-center">
    
    <!-- Section title -->
    <div class="align-center">
        <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
    </div>
                
    <div class="row grid">

        <!-- Left pane -->
        <div class="col-xs-12 col-sm-6 align-center campaign-block">
            <div class="st-smc-offer-image">
                <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
            </div>
            
            <div class="campaign-description">
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.
                
                <div>
                    <a href="http://google.com">Do smth</a>
                </div>
            </div>
        </div>

        <!-- Right pane -->
        <div class="col-xs-12 col-sm-6 align-center campaign-block">
            <div class="st-smc-offer-image">
                <img src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
            </div>
            
            <div class="campaign-description">
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
                Reno ala vimir de. Lal so pes yeti itu. <br>
                Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
                nisecem tu acodeb imemoca robeci toyo cono. <br>
                refigib redok lelep ece mec sahal. Hudetil run ewona mef.<br>
                
                <div>
                    <a href="http://google.com">Do smth</a>
                </div>
            </div>
        </div>
        
    </div>
    
</div>
</div>
</section>

</body>
</head>
0 голосов
/ 11 июля 2019

вы можете попробовать таким образом 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <style>
        .grid--article {
			padding-bottom: 10px;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-gap: 0.5rem;
		}
		.st-smc-offer-image {
			display:block;
			text-align:center;
			background:#FFF;
		}
		.grid--wrapper {
			text-aling:center;
			background-color: #a05b4e;
		}
    </style>
    </head>
    <body>
    <section>
        <div class="row">
            <div class="col-sm-12 align-center">
                <div class="align-center">
                    <b>Atape tehe migicur miesa telalem yiso ipipire;</b>
                </div>
				
				<div class="grid--article">
					<div class="grid--wrapper">
						<div class="st-smc-offer-image">
							<img 
    src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
						</div>
						<div class="campaign-description">
							Reno ala vimir de. Lal so pes yeti itu. <br>
							Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
							nisecem tu acodeb imemoca robeci toyo cono. <br>
							refigib redok lelep ece mec sahal. Hudetil run ewona mef.
							<div>
								<a href="http://google.com">Do smth</a>
							</div>
						</div>
					</div>
					<div class="grid--wrapper">
						<div class="st-smc-offer-image">
							<img 
    src="https://static3.grsites.com/archive/textures/misc/misc285.jpg" />
						</div>
						<div class="campaign-description">
							Reno ala vimir de. Lal so pes yeti itu. <br>
							Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
							nisecem tu acodeb imemoca robeci toyo cono. <br>
							refigib redok lelep ece mec sahal. Hudetil run ewona mef.
							Reno ala vimir de. Lal so pes yeti itu. <br>
							Efisiebe mir enacilep ocu mogiru iyoyepe. Liler oxilo <br>
							nisecem tu acodeb imemoca robeci toyo cono. <br>
							refigib redok lelep ece mec sahal. Hudetil run ewona mef.
							<div>
								<a href="http://google.com">Do smth</a>
							</div>
						</div>
					</div>
				</div>
				
				
            </div>
        </div>
     </section>
    </body>
    </head>
    </html>
...