Question

我需要将div放在块中，或者无论它名称如何，这样当输入大量文本时保持其位置并且未在下面显示，我附上了一些我想做的截图

编辑：抱歉，我忘了发布我的代码：/

CSS：

 .columnas{
    overflow: hidden;
}
.full{
    width:98%;
    margin: 20px 1%;
    background: #212121;
    height: 40px;
}
.col-3{
    width: 34%;
    margin: 5px 1%;
    background: #3b5998;
    height: 40px;
    float: left;
    display: inline-block;
    @media screen and (max-width: $tablet){
    width: 47.86%;  
    }
    @media screen and (max-width: $mobile){
    width: 98%; 
    }
}
.col-4{
    width: 26%;
    margin: 5px 1%;
    background: #ffff00;
    display: inline-block;
    //height: 40px;
    float: left;
}
.col-7{
    width: 70%;
    margin: 5px 1%;
    background: red;
    display: inline-block;
    //height: 40px;
    float: left;
}

HTML ：

<html>
    <head>
    <link href="sass/app.css" rel="stylesheet" type="text/css" />
        <title>Frontend</title>
    </head>
    <body>
        <div class="columnas">
            <div class="full"></div>
            <div class="col-7"><p>Text1</p></div>
            <div class="col-4"><p>Text2</p></div>
            <div class="col-3"><p>Text3</p></div>
            <div class="col-3"><p>Text4</p></div>
        </div>
    </body>
    </html>

Answer 1

我相信您正在寻找overflow property：尝试将此css属性添加到您的div：

overflow: scroll;

Answer 2

你需要添加你的div风格：

 div {
        display: inline-block;
    }

Answer 3

试试这样：

 <div class="columnas">
    <div class="full"></div>
    <div class="col-7"><p>Text1</p></div>
    <div class="col-3"><p>Text3</p></div>
    <div class="col-3"><p>Text4</p></div>
    <div class="col-4"><p>Text2</p></div>

</div>

CSS：

.columnas{
    overflow: hidden;
}
.full{
    width:98%;
    margin: 20px 1%;
    background: #212121;
    height: 40px;
}
.col-3{
    width: 33%;
    margin: 5px 1%;
    background: #3b5998;
    height: 40px;
    float: left;
    display: inline-block;
    @media screen and (max-width: $tablet){
    width: 47.86%;  
    }
    @media screen and (max-width: $mobile){
    width: 98%; 
    }
}
.col-4{
    width: 26%;
    margin: 5px 1%;
    background: #ffff00;
    display: inline-block;
    //height: 40px;
    float: left;
    position: relative;
    top: -60px;
    min-height: 200px;
}
.col-7{
    width: 67%;
    margin: 5px 1%;
    background: red;
    display: inline-block;
    //height: 40px;
    float: left;
}

Answer 4

尝试将position: fixed添加到<div>。

Answer 5

试试这个：

<body>
    <div class="columnas">
        <div class="full"></div>
        <div class="column1">
          <div class="col-7"><p>Text1</p></div>
          <div class="col-3"><p>Text3</p></div>
          <div class="col-3"><p>Text4</p></div>
        </div>
        <div class="col-4"><p>Text2</p></div>

    </div>
</body>

和CSS：

 .columnas{
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
 }
 .column1 {
     flex: 0 0 70%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }
 .full{
     flex:0 0 98%;
     margin: 20px 1%;
     background: #212121;
     height: 40px;
}
.col-3{
     flex:0 0 48%;
     margin: 5px 1%;
     background: #3b5998;
     height: 40px;
     @media screen and (max-width: $tablet){
        flex:0 0 47.86%;  /* ToDo */
     }
    @media screen and (max-width: $mobile){
       flex:0 0 98%; /* ToDo */
    }
}
.col-4{
    flex: 0 0 28%;
    margin: 5px 1%;
    background: #ffff00;
}
.col-7{
    flex:0 0 100%;
    margin: 5px 1%;
    background: red;
}

CSS：我如何在块中显示我的div？

5 个答案: