Я хочу, чтобы мои границы моих div'ов полностью перекрывались, но становились странными, когда я выравнивал их с помощью flex - PullRequest
Новая
       20

Я хочу, чтобы мои границы моих div'ов полностью перекрывались, но становились странными, когда я выравнивал их с помощью flex

0 голосов
/ 29 сентября 2019

Большой новичок здесь, но я пытаюсь выровнять свои div в строках так, чтобы дизайн границ не становился слишком толстым в местах их соприкосновения.

По какой-то причине я не могу использовать pre , чтобы написать HTML, поэтому я напишу его в виде простого текста.

.site {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  align-items: stretch;
}

.box1 {
  background: #000000;
  background: #000000;
  background: #000000;
  margin: 0px;
  padding: 0px;
  width: 55px;
  height: 100%;
  border: 3px solid black;
  background-color: white;
}

.box2 {
  background: #000000;
  background: #000000;
  background: #000000;
  margin: -3px;
  padding: 0px;
  width: 730px;
  height: 100%;
  border: 3px solid black;
  background-color: white;
}
<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

Я еще не дошел до этой точки, но я также хочу, чтобы у всего .site была черная граница 3 пикселя вокруг него.Я в основном хочу .site с черной рамкой 3 px и разделителями 3 px между различными компонентами.

Ответы [ 3 ]

0 голосов
/ 29 сентября 2019

Чтобы у всего сайта была граница, вы можете задать для <body> границу.Для ваших элементов, вы пытались дать соответствующим сторонам границу всего в 1,5 пикселя?

0 голосов
/ 29 сентября 2019

Я подготовил небольшой код для вас.Вы можете выбрать любой из двух фрагментов.

Случай 1: граница в 3 пикселя для вашего класса .site, а также аккуратный и чистый div для разграничения класса .site и двух внутри div. 

.site, .box1, .box2{
display: flex;
padding:7px;
border:3px solid black;
}
<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

Случай 2: незначительное изменение границ, но в соответствии с вашими потребностями, граница в 3 пикселя для вашего класса .site в этом случае также останется такой же. 

.site{
display:flex;
border:3px solid black;
padding: 5px;
}

.box1, .box2{
border: 3px solid black;
}
<div class="site">

  <div class="box1">Box 1</div>

  <div class="box2">Box 2</div>

</div>

Надеюсь, это поможет.

0 голосов
/ 29 сентября 2019

Попробуйте ниже CSS для box2: 

.box2{
    background: #000000;
    background: #000000;
    background: #000000;
    padding: 0px;
    width: 730px;
    height: 100%;
    border: 3px solid black;
    border-left: 0;
    background-color: white;
}
...