如何水平对齐两个div并强制内容在div内

问题描述 投票:0回答:1

我确信类似的答案已经回答了,但是我现在找不到我要处理的实际情况,所以这是我的问题:我在右侧有一个div(具有固定的宽度),所有左侧都来自另一个div。好的,我可以正确放置两个div,但是我的问题是第二个内容显示在第一个div下方。我尝试了几种配置,但均未成功。我知道这是一个愚蠢的问题,但是如果您能提供任何帮助,我将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>      
</head>

<body>

<div>   
    <div style="display: inline-block; width:100%; display: inline-block;"> 
        <div id="sidemenu" style="background-color: #004E87; position: fixed; width: 100px; height: 100%; float:left; display: inline-block;">
        </div>
        <div id="leftside" style="width: 100%; float:right; background-color: yellow; display: inline-block;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

<script type="text/javascript"> 

</script>

</body>
</html>
css bootstrap-4 alignment
1个回答
0
投票

如果您想像自己一样使用自己的样式,那为什么需要引导程序呢?您可以使用网格系统或引导程序中的flexbox实现此目的。

© www.soinside.com 2019 - 2024. All rights reserved.