Question

每次尝试移动div时，如何将三个不同的div（红色，黄色，绿色）放在div的底部？

string newTokens = GetTokens();
using (StreamWriter writer = new StreamWriter("TokensFile.txt")) {
    writer.Write(newTokens));
    writer.Flush();
    writer.Close();
}

This is what

Answer 1

根据您提供的链接，假设您要复制左侧div的内容以及中间和右侧的div。在这种情况下，您只需要复制看起来像您当前想要的方式的div并将包含三个块大小的三个容器设置为display: inline-block;

下面是我快速汇总的一个示例，您可以根据自己的意愿进行引用和修改。我在元素周围添加了额外的margin，以帮助显示设置并在所有容器周围添加了边框。

希望这会有所帮助。下次尝试提供更多详细信息，以显示您尝试过的所有内容。

body {
    box-sizing: border-box;
    box-sizing: padding-box;
}

.main_container {
    border: 2px solid #0000ff;
    margin: auto;
    text-align: center;
    width: 75%;
}

.box_container1 {
    border: 2px solid #ff0000;
    width: 25%;
    height: auto;
    display: inline-block;
    margin: 5% 5% 5% 0;
}

    .box_container1 .box1 {
        border: 2px solid green;
        margin: 5%;
        width: 25%;
        margin: 10% auto;
    }

    .box_container1 .box2 {
        border: 2px solid pink;
        margin: 10% auto;
        width: 50%;
    }

    .box_container1 .box3 {
        border: 2px solid yellow;
        margin: 10% auto;
        width: 75%;
    }

.box_container2 {
    border: 2px solid #ff0000;
    width: 25%;
    display: inline-block;
    margin: 5% 5% 5% 0;
}

    .box_container2 .box1 {
        border: 2px solid green;
        margin: 5%;
        width: 25%;
        margin: 10% auto;
    }

    .box_container2 .box2 {
        border: 2px solid pink;
        margin: 10% auto;
        width: 50%;
    }

    .box_container2 .box3 {
        border: 2px solid yellow;
        margin: 10% auto;
        width: 75%;
    }

.box_container3 {
    border: 2px solid #ff0000;
    width: 25%;
    height: auto;
    display: inline-block;
    margin: 5% 0 5% 0;
}

    .box_container3 .box1 {
        border: 2px solid green;
        margin: 5%;
        width: 25%;
        margin: 10% auto;
    }

    .box_container3 .box2 {
        border: 2px solid pink;
        margin: 10% auto;
        width: 50%;
    }

    .box_container3 .box3 {
        border: 2px solid yellow;
        margin: 10% auto;
        width: 75%;
    }

.group {
    content: '';
    display: table;
    clear: both;
}

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="UTF-8">
        <link rel="stylesheet" href="css/so_help.css" type="text/css">
		<title></title>
	</head>
	<body>
        
        <div class="main_container group">
            <div class="box_container1">
                <div class="box1">Box1</div>
                <div class="box2">Box2</div>
                <div class="box3">Box3</div>
            </div>

            <div class="box_container2">
                <div class="box1">Box1</div>
                <div class="box2">Box2</div>
                <div class="box3">Box3</div>
            </div>

            <div class="box_container3">
                <div class="box1">Box1</div>
                <div class="box2">Box2</div>
                <div class="box3">Box3</div>
            </div>
        </div>
        
	</body>
</html>

将多个div放在div的底部

1 个答案: