0

Как сделать мне так, чтобы зеленый блок всегда растягивался по высоте блока, слева от него? (Today)

html:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link href="css.css" rel="stylesheet">
    </head>
    <body>
        <div class = "head">
            <input type="button" value=" Today " class = "button">
            <input type="button" value=" Tomorow " class = "button">
            <input type="button" value=" Someday " class = "button">
            <input type="button" value=" Depricated " class = "button">
            <input type="button" value=" Completed " class = "button">
            <input type="button" value=" Deleted " class = "button">
        </div>
        <div>
            <div class = "day">
                <h1>Today</h1><br>
                <p>bla1 <input type="button" value="add file"></p>
                <p>bla2 <input type="button" value="add file"></p>
                <p>bla3 <input type="button" value="add file"></p>
            </div>  
            <div class = "func">
                <input type="button" value="add new task"><br>
                <input type="button" value="mark task as completed"><br>
                <input type="button" value="change task"><br>
                <input type="button" value="delete task">
            </div>
        </div>
    </body>
</html>

css:

.center { 
    text-align: center; 
}

.head{
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
    background: #FFFAFA;
    float: top;
    width: 100%;
    margin-right: 30px;
}

.button{
    margin-right: 30px;
}

.day{
    text-align: center; 
    background: #E6E6FA;
    float: left;
    width: 80%;
}

.func{
    text-align: center; 
    background: #98FB98;
    float: right;
    width: 20%;
}

Блоки

1
  • 1
    Использовать flex
    – user298256
    29 авг 2019 в 12:01

2 ответа 2

1

В реалиях float https://codepen.io/yamich/pen/XWrgZav Если начали изучать то начните с flexbox, а лучше и вовсе grid ))

HTML
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link href="css.css" rel="stylesheet">
    </head>
    <body>
        <div class = "head">
            <input type="button" value=" Today " class = "button">
            <input type="button" value=" Tomorow " class = "button">
            <input type="button" value=" Someday " class = "button">
            <input type="button" value=" Depricated " class = "button">
            <input type="button" value=" Completed " class = "button">
            <input type="button" value=" Deleted " class = "button">
        </div>
        <div class="wrapper clearfix">
            <div class = "day">
                <h1>Today</h1><br>
                <p>bla1 <input type="button" value="add file"></p>
                <p>bla2 <input type="button" value="add file"></p>
                <p>bla3 <input type="button" value="add file"></p>
            </div>  
            <div class = "func">
                <input type="button" value="add new task"><br>
                <input type="button" value="mark task as completed"><br>
                <input type="button" value="change task"><br>
                <input type="button" value="delete task">
            </div>
        </div>
    </body>
</html>
Css
.center { 
    text-align: center; 
}

.head{
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
    background: #FFFAFA;
    float: top;
    width: 100%;
    margin-right: 30px;
}

.button{
    margin-right: 30px;
}

.day{
    text-align: center; 
    background: #E6E6FA;
    float: left;
    width: 80%;
    padding-right: 20%;
}

.func{
    text-align: center; 
    background: #98FB98;
    right: 0;
    width: 20%;
    position: absolute;
    height: 100%;
}
.wrapper {
  position:relative;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
1

.nehead{
  display: flex;
}
.day{
  background-color: lightgreen;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.func{
  background-color: lightblue;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
<div class="nehead">
  <div class="day">
    <h1>Today</h1><br>
    <p>bla1 <input type="button" value="add file"></p>
    <p>bla2 <input type="button" value="add file"></p>
    <p>bla3 <input type="button" value="add file"></p>
  </div>  
  <div class="func">
    <input type="button" value="add new task"><br>
    <input type="button" value="mark task as completed"><br>
    <input type="button" value="change task"><br>
    <input type="button" value="delete task">
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.