Dlaczego te 2 divy nie wyświetlają się koło siebie?

0

Taki jest problem że nie wiem dlaczego nie wyświetlają się koło siebie?
jeśli dodam tekst w nowej linii, automacztynie 2 div przesuwa się w dół, ale dlaczego?

<!DOCTYPE html>
<html>
<head>
<style>
div.one {
	margin: 20px;
    width: 200px;
    height: 100px;
    border: 1px solid black;
    }
div.two {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    }
  div{    display:inline-block;
} 
    
</style>
</head>
<body>

<div class="one"><ul>
  bcf
  <br>
  <br>
  <br>
  <a href="">d</a>
  <br>
</ul>
</div>
<div class="two"><ul>
vx
</ul>
</div>
</body>
</html>

4.jpg

0

Oba elementy div są śródliniowe. Domyślnie wyświetlą się obok siebie i dopasują do zawierającego je tekstu (do szerokości tekstu). Nie mam pojęcia, jak działa własność height dla elementów śródliniowych czy inline-block. Jednak w Twoim przykładzie najwyraźniej ustawiają się w jednej linii tekstu, a każda dodatkowa linia, którą do któregoś z nich dodajesz, powoduje jakby powiększenie tej linii tekstu (w górę). Ja bym to tak rozumiał. Zauważ, że teksty "d" oraz "vx" są umieszczone w jednej linii.

To wydaje się bardzo interesującą lekturą (ale z uwagi na długość ja sobie odpuściłem): https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

0
<!DOCTYPE html>
<html>
<head>
<style>
div.coint {
	width: 100%;
	height: 100%;

}
div.one {
float: left;
   
    width: 200px;
    height: 100px;
    border: 1px solid black;
    }
div.two {
	float: left;
    width: 200px;
    height: 100px;
    border: 1px solid black;
    }


</style>
</head>
<body>
<div class="coint">
<div class="one"><ul>
  bcf
  <br>
  <br>
  <br>
  <a href="">d</a>
  <br>
</ul>
</div>
<div class="two"><ul>
vx
</ul>
</div>
</div>
</body>
</html>

Margines go wypycha, dałeś zwykły margines 20 px tylko dla jednego diva, i on będzie tworzył takie schodki. Bez marginesu jest OK. Jak chcesz margines na dwa divy ustaw go na div obejmujący te dwa divy.

Jaki masz cel w korzystaniu z inline-block? na pewno nie chciałeś używać go na DIV tylko na UL-LI jak już.

1 użytkowników online, w tym zalogowanych: 0, gości: 1