Question

我仍在学习HTML和CSS，并且很难将rightContentHeader移到leftContentHeader旁边？

这里是code。

        #body .content{
            background-color: rgba(124, 76, 179, 0.6);
            width: auto;
            height: auto;
            margin: 0 150px;
            box-shadow: 2px 2px 2px 2px black;
            
        }

        #body .content .leftContent .leftContentHeading{
            width: 70%;
            box-shadow: 2px 2px 2px black;
            margin:0;
        }

        #body .content .leftContent .leftContentHeading p, #body .content .leftContent .leftContentHeading h3{
            margin: 0;
            padding: 20px;
            text-align: justify;
        }

        #body .content .rightContent .rightContentHeading {
            width: 30%;
            box-shadow: 2px 2px 2px red;
            align-content: right;
        }

 
 <div id="body">
 <div class="content">
                <div class="leftContent">
                    <div class="leftContentHeading">
                        <h3>Welcome</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat at ante eu consectetur. Ut finibus dictum ullamcorper. Mauris quis urna id arcu sodales egestas. Phasellus tristique efficitur risus, in accumsan massa porta ut. Duis mollis nisi non magna tincidunt faucibus. Aliquam erat volutpat. Ut vestibulum, lorem et tincidunt fermentum, velit tellus mollis mauris, at ultrices nisl libero faucibus velit. Pellentesque eget nisl in eros hendrerit placerat ornare quis turpis. Proin tempor ante elit, eu cursus mi consectetur eu. Maecenas quis fermentum sem, vitae porta erat. Cras gravida rutrum pretium. Fusce luctus iaculis nisl, vitae sodales lacus eleifend id.</p>
                    </div>
                </div>
                <div class="rightContent">
                    <div class="rightContentHeading">
                        <h3>Lorem ipsum</h3>
                    </div>
                </div>
            </div>


        </div>

Answer 1

有很多方法可以做到这一点。一种是使用CSS Flex框。

示例代码：

.content {
    display: flex;
    flex-direction: row;
    background-color: rgba(124, 76, 179, 0.6);
}

.leftContent {
    flex: 3;
    box-shadow: 2px 2px 2px black;
}

.rightContent {
    flex: 1;
    box-shadow: 2px 2px 2px red;
}

.leftContent, .rightContent {
    text-align: center;
}

<div id="body">
    <div class="content">
        <div class="leftContent">
            <div class="leftContentHeading">
                <h3>Welcome</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consequat at ante eu consectetur. Ut finibus dictum ullamcorper. Mauris quis urna id arcu sodales egestas. Phasellus tristique efficitur risus, in accumsan massa porta ut. Duis mollis nisi non magna tincidunt faucibus. Aliquam erat volutpat. Ut vestibulum, lorem et tincidunt fermentum, velit tellus mollis mauris, at ultrices nisl libero faucibus velit. Pellentesque eget nisl in eros hendrerit placerat ornare quis turpis. Proin tempor ante elit, eu cursus mi consectetur eu. Maecenas quis fermentum sem, vitae porta erat. Cras gravida rutrum pretium. Fusce luctus iaculis nisl, vitae sodales lacus eleifend id.</p>
            </div>
        </div>
        <div class="rightContent">
            <div class="rightContentHeading">
                <h3>Lorem ipsum</h3>
            </div>
        </div>
    </div>


</div>

如何移动和使用右侧未使用的宽度空间？

1 个答案: