<hr> rozjeżdza mi divy, da się to jakoś obejść?

0

Cześć, mam problem z tym, że użycie linii "<\hr>" nawet z visibility:hidden niszczy mi strukturę strony w taki sposób:

1.PNG

A chciałbym, aby było to w jednej linii. Niestety potrzebuje użyć tego żeby go w css dla urządzeń mobilnych

Ktoś ma jakiś pomysł?

https://jsfiddle.net/oveky79a/3/

	<div id="test1">
		a
	</div>
	
	<div id="hr_line">
		<hr>
	</div>
	

	<div id="test2">
		b
	</div>
	
	<div id="hr_line">
		<hr>
	</div>
	
	<div id="test3">
		c
	</div>

CSS:

	#hr_line
	{
		visibility: hidden;
	}
	#test1
	{
		float: left;
		background-color: green;
		width: 33%;
	}
	#test2
	{
		float: left;
		background-color: blue;
		width: 33%;
	}
	#test3
	{
		float: left;
		background-color: red;
		width: 33%;
	}
1

Zapomniałeś dać float także elementom zawierającym hr. A tak poza tym:

  • za pomocą border-bottom i ewentualnie outline/margin osiągniesz to samo, co z hr;
  • jeśli już używasz hr, to po co dodatkowo opakowujesz go w div?
  • jeśli już używasz dodatkowego elementu do oddzielania, to możesz go ostylować w taki sposób, że będzie wyglądał jak hr i wtedy dodatkowy element będzie zbędny.
1

zainteresuj sie też flexboxem ;)

1

Nie duplikuj atrybutów ID w tagach - masz dwa razy hr_line

0

Dzięki, to co napisaliście jest o wiele bardziej sensowne niż to co zrobiłem :>

ŁF napisał(a):
  • jeśli już używasz hr, to po co dodatkowo opakowujesz go w div?

W sumie racja, hr{} też by działał

1

http://flexboxfroggy.com/ - polecam :)

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