CSS: Как я могу показать свои div в блоке?

и мне нужно поместить мой DIV в блоке, или как называет его, так что, когда много текста вводится сохраняет свою позицию и не будет показано ниже, я приложил некоторые скриншоты того, что я хочу сделатьCSS: Как я могу показать свои div в блоке?

EDIT: извините я забыл опубликовать мой код:/

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>

источник

2016-08-01 maudev

Пожалуйста, пост код в вопросе, чтобы мы могли помочь вам. –

Определяет, что вам нужно быть немного понятнее о том, что вы ищете. – cHao

можете ли вы разместить свой код? –

Я считаю, что вы ищете overflow property: попробуйте добавить это свойство CSS для вашего DIV:

overflow: scroll;

источник

2016-08-01 19:31:59 Loris

Нет, мне не нужен прокрутка, мне просто нужно, чтобы мои divs оставались в своих положениях, даже я вставляю длинный текст, и он не показан ниже, как синие столбцы второго изображения – maudev

Вам нужно добавить к вашему стилю сНу:

div { 
     display: inline-block; 
    }

источник

2016-08-01 19:35:12

Я пробовал это и не работает :(или что-то в моем коде не так? – maudev

Попробуйте вот так:

<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; 
}

источник

2016-08-01 19:59:45

Попробуйте добавить position: fixed к вашему <div>.

источник

2016-08-01 20:05:55

попробовать это:

<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; 
}

источник

2016-08-01 20:09:38

CSS: Как я могу показать свои div в блоке?

ответ

Смежные вопросы