Блог

Главная - Вопросы по программированию - Достижение определенного расположения кнопок

Достижение определенного расположения кнопок

#html #css

#HTML #css

Вопрос:

Я хочу добиться следующего макета кнопок, который я разработал в word:

введите описание изображения здесь

«Кнопка 2» и «Кнопка 3» занимают 50 на 50 длины «Кнопки 1» выше, что означает, что они имеют одинаковую ширину.

У меня возникают проблемы, когда две нижние кнопки не занимают 50 на 50, как показано на рисунке выше.

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#output2 {
    height: 90vh;
    width: 25%;
    border: 1px solid black;
}

#basic {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}

#small {
    display: flex;    
} 
 <!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "output2">
    <div id = "basic">
      <button id = "btn1">Button 1</button>
      <div id = "small">
        <button id = "btn2">Button 2</button>
        <button id = "btn3">Button 3</button>
      </div>
    </div>
  </div>
</body>
</html>

Ответ №1:

Просто укажите #btn2 и #btn3 ширину 50% для каждого.

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#output2 {
    height: 90vh;
    width: 25%;
    border: 1px solid black;
}

#basic {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}

#small {
    display: flex;    
}

#btn2, #btn3 {
    width: 50%
} 
 <!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "output2">
    <div id = "basic">
      <button id = "btn1">Button 1</button>
      <div id = "small">
        <button id = "btn2">Button 2</button>
        <button id = "btn3">Button 3</button>
      </div>
    </div>
  </div>
</body>
</html>

Ответ №2:

 #btn2, #btn3{
    width: 50%;
}

пожалуйста, добавьте приведенный выше код css.

Ответ №3:

Flexbox попытается сжать объекты вдоль главной оси, чтобы они поместились, но не будет пытаться растянуть их, чтобы заполнить пространство по умолчанию. (но по умолчанию он будет растягиваться по поперечной оси, поэтому при установке #basic на flex-direction:column значение Кнопка 1 заполняет всю ширину.)

Вы можете указать отдельным объектам flex занимать половину доступного пространства, установив для них значение flex-basis:50% 

 #basic {
    border: 1px solid black;
    display: flex;
    flex-direction: column;
}

#small {
    display: flex;    
}
.flex-basis-50 { flex-basis: 50%; } 
 <div id = "basic">
  <button id = "btn1">Button 1</button>
  <div id = "small">
    <button id = "btn2" class="flex-basis-50">Button 2</button>
    <button id = "btn3" class="flex-basis-50">Button 3</button>
  </div>
</div>