css - 如何水平对齐两个div并强制内容在div内-6ren

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

转载作者：行者123 更新时间：2023-11-27 23:15:09

我确定类似的东西已经回答了，但我找不到我现在正在处理的确切场景所以，这是我的问题:我右边有一个 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>

使用 flex 更新!

我现在的问题是我无法获得屏幕的 100 高度。有什么帮助吗？

<div class="flex-container" style="display: flex; width: 100%; background-color: green; align-items: stretch;">
    <div class="flex-item" style="background-color: yellow; width: 100px; height: 100%;">1</div>
    <div class="flex-item" style="background-color: red; width: 100px;">2</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 class="container-fluid">   
    <div class="row">
        <div class="col-2" style="background-color: #004E87;height:100vh">      
        </div>
        <div class="col" >
          <div class="row" style="background-color: yellow">
            <div class = "col">
            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>
        </div>
        </div>
   
</div>

<script type="text/javascript"> 

</script>

</body>
</html>