请问左右两边的盒子怎么都一样变高了，怎么实现不一样高的效果？谢谢！

宝慕林6386922 2017-11-30

源自：flex弹性布局 5-1 flex-card布局

收起

2回答

小丸子爱吃菜回答被采纳获得+3积分 2017-12-01 09:56:05

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .grid {
        display: flex;
        margin: 6px 0;
        width: 800px;
    }

    .grid-cell {
        margin: 0 6px;
        text-align: center;
        flex: 1;
    }

    .demo1,
    .demo2,
    .demo3 {
        margin: 0 6px;
        background: #ccc;
        border: 1px solid #0a99e5;
    }
    </style>
</head>

<body>
    <div class="grid">
        <div class="grid-cell">
            <div class="demo1">This cell should be top-aligned.</div>
        </div>
        <div class="grid-cell">
            <div class="demo2">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.
            </div>
        </div>
        <div class="grid-cell">
            <div class="demo3">This cell should be top-aligned.</div>
        </div>
    </div>
</body>
<html>

可以参考上面的代码~重新给里面的3个子元素设置样式

收起回答

宝慕林6386922 提问者 #1

非常感谢！

2017-12-02 18:02:42

小丸子爱吃菜 2017-11-30 17:17:02

请将你的代码粘贴上来，我们需要运行并调试下你的代码，看是什么问题~

祝学习愉快！

收起回答

提问者宝慕林6386922 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .grid { display: flex;margin: 6px 0;width: 800px; } .grid-cell {background: #ccc;border: 1px solid #0a99e5;margin: 0 6px; text-align: center; flex:1 } </style> </head> <body> <div class="grid"> <div class="grid-cell"> <div class="demo1">This cell should be top-aligned.</div> </div> <div class="grid-cell"> <div class="demo1">Pellentesque sagittis vel erat ac laoreet. Phasellus ac aliquet enim, eu aliquet sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar porta leo, eu ultricies nunc sollicitudin vitae. Curabitur pulvinar dolor lectus, quis porta turpis ullamcorper nec. Quisque eget varius turpis, quis iaculis nibh.</div> </div> <div class="grid-cell"> <div class="demo1">This cell should be top-aligned.</div> </div> </div> </body> </html>

2017-11-30 23:03:27