Jak postawić obok siebie dwa takie same elementy

pytanie zadane 25 sierpnia 2018 w HTML i CSS przez Layoutowiec Mądrala (5,470 p.)
zmienione kategorie 25 sierpnia 2018 przez ScriptyChris

Witam wszystkich!

Więc mam jedno pytanie i wydaje mi się że odpowiedź jest dość prosta ale nie mogę sobie poradzić. Mam element o tej samej klasie i chciałbym obok niego postawić drugi taki sam co powinienem zrobić w takiej sytuacji?

Dzięki za poświęcony czas i liczę na pomoc

Ps. proszę kodzik

<div class="posts"> 

    <div class="imagepost">
        <img src="img/photo.jpg"   alt="alternative text"></a>
    </div>

    <div id="footer-post">

        <div class="category-post">
            kategoria
        </div>
        <div class="title-post">
            tytuł
        </div>    
        <div class="introduction-post">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor metus, 
            commodo eu tempor porttitor, faucibus eget diam. Duis consectetur tincidunt 
            ipsum, vel elementum mi semper quis. Suspendisse fermentum mollis massa. Aliquam et ligula...
        </div>
        <div class="load-link-post">
            <li><a href="artysci.html">Czytaj Dalej</a></li>
        </div>

    </div>

</div>

.posts
{

	width: 50%;
	height: 230px;
	margin-left: 11.5%;
	float: left;
}

.imagepost
{
	height: 230px;
}

.category-post
{
	font-size: 15px;
	letter-spacing: 2px;
	margin-left: 42%;
	margin-top: -32%;
	color: #777777;
	font-family: 'Source Sans Pro', sans-serif;
}

.title-post
{
	font-size: 20px;
	margin-top: 1%;
	margin-left: 43%;
	letter-spacing: 1px;
}

.introduction-post
{
	width: 300px;
	font-size: 15px;
	text-align: justify;
	margin-top: 1%;
	margin-left: 42%;
}

.load-link-post
{
	height: 25px;
	width: 150px;
	font-size: 15px;
	letter-spacing: 2px;
	font-weight: bold;
	padding-top: 5px;
	margin-left: 47.5%;
	margin-top: 3%;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	font-family: 'Lato', sans-serif;
}

.load-link-post > li
{
	display: inline-block;
	padding-left: 20px;
	padding-right: 20px;
}

.load-link-post a
{
	color: #000;
	text-decoration: none;
}

#footer-post
{
	margin-top: 58%;
	margin-left: -78%;
}

komentarz zamknięcia: Problem rozwiązany

komentarz 25 sierpnia 2018 przez niezalogowany

Zła kategoria -> Html, Css

Tag "programowanie" średnio pasuje

komentarz 25 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)

No ale z js to już "programowanie" a tagi z proponowanych na szybko

2 odpowiedzi

odpowiedź 25 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 25 sierpnia 2018 przez Layoutowiec

Najlepsza

Najlepiej jak zrobisz sobie kawę z dwóch łyżeczek ale bez cukru, bo cukier szkodzi... A jeśli tą odpowiedzią nie pomogłem, to znaczy, że jest ona tak samo sensowna jak pytanie :)

Jak mamy Ci pomóc skoro nie dałeś żadnego kodu? To, że są jakieś dwie takie same klasy nie ma znaczenia, nie wiemy co jest w tych klasach, jak jest ostylowany kontener dla tych elementów... nic nie wiemy.

Daj to na codepen i dokładnie opisz problem to chętnie pomoge.

EDIT:

Po dodaniu kody powstał i codepen rozwiązujący problem:https://codepen.io/Tomek_Sochacki/pen/xaZPKP?editors=1100

komentarz 25 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)

Dobra dobra, zapomniałem :) mam nadzieję że nie wygląda on bardzo źle bo pisałem go dość krótko na szybko

komentarz 25 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)

dokładnie opisz problem to chętnie pomoge.

Chodzi o to że mam taki post, i chciałbym postawić drugi taki post obok tego ale po prostu nie wiem jak. Trochę pokombinowałem ale nie mogę dojść do tego co trzeba zrobić

komentarz 25 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

https://codepen.io/Tomek_Sochacki/pen/xaZPKP?editors=1100

Chodzi o coś takiego?

Najłatwiej zrobić tak:

tworzysz element nadrzędny, ja dodałem div o klasie container
posty umieszczas w tym kontenerze - ja po prostu skopiowałem drugi raz tego pierwszego posta
ustawiasz sobie dokładnie parametry wyświetlania postów w kontenerze (np. flex-wrap, justify-content) i odpowiednio w razie potrzeby ustawiasz np. min i max wymiary dla jednego posta

Porób tylko lepsze nazwy klas, np. może BEM itp. aby łatwiej się w przyszłości edytowało taki kod.

komentarz 25 sierpnia 2018 przez Layoutowiec Mądrala (5,470 p.)

ok. Naprawdę wielkie dzięki za pomoc bo ja pewnie bym się jeszcze trochę namęczył zanim doszedłbym do tego że wystarczy zrobić kontener

komentarz 25 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Teoretycznie można to zrobić i samym float:

https://codepen.io/anon/pen/wEMPKw

ale jest to stare rozwiązanie i rodzi wiele problemów przy bardziej rozbudanym layoucie. Flex jest na prawdę bardzo przyjemny i łatwy.

Kontener teoretycznie też nie musi być, bo samo body jest nadrzędnym kontenerem, ale za chwilę dojdzie na stronie coś więcej niż te posty i będzie problem, dlatego kontener jest dobrym rozwiązaniem :)