Question

我正在基于响应列的布局上工作，每列包含不同长度的文本。我正在使用bootstrap网格来获取响应性，但是在全屏模式下为每个列设置内部div的高度时遇到问题。我需要从类似的stack-overflow question借来的与此图片类似的内容。

我正在寻找的解决方案在我的情况下不起作用，因为我正在处理external的孙子的身高。

下面是HTML和CSS代码的简化版本。（在此示例中，我删除了不必要的样式和标签。）我需要使用“ .campaign-description” div的高度来获取“ .campaign-block” div的全部高度。

使用这种布局是否还可以做到？

<!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>

Answer 1

据我所知，Flexbox仅在父子之间工作，而不在父子之间工作。这意味着在<div class="row grid">上设置的Flexbox不会直接影响其孙子<div class="campaign-block">。

要实现.campaign-description占用底部的剩余空间，您可以在.campaign-block上引入Flexbox并设置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>

Answer 2

您可以尝试这种方式

<!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>

flex div的孙子全高

2 个答案: