Jak umieścić dwa pola div obok siebie

Więc jestem całkiem nowy w pisaniu kodów (około kilku tygodni) i uderzyłem w ścianę podczas pisania kodów na mojej stronie internetowej. Chcę mieć układ taki jak tenJak umieścić dwa pola div obok siebie

ale nie mogę wymyślić, jak umieścić dwa pola obok siebie (jedno pole będzie wideo objaśniające moją witrynę, inne pole będzie formularzem rejestracyjnym .) Chcę, żeby były obok siebie, z około calowym odstępem między pudełkami.

Potrzebuję też pomocy przy szerokości mojej strony internetowej? Teraz wygląda na to, że nagłówek nie pasuje do strony, powodując poziome przewijanie. Tak mi się podoba

Chcę, aby cała witryna wyglądała tak, jakby była to jedna wielka skrzynka, a ja chcę mieć całą zawartość w pudełku. Czy ktoś może mi pomóc? Bardzo doceniane. Z góry dziękuję.

Źródło

2013-03-13 Richard Linares

mógłbyś wkleić kawałek kodu css tutaj? – kabuto178

Zajrzyj do CSS i HTML dogłębnie to zrozumiesz. Po prostu przesuwa się po bokach w lewo i prawo, a te pudełka muszą znajdować się w tym samym dziale. http://www.w3schools.com/html/html_layout.asp może być dobrym źródłem informacji.

Źródło

2013-03-13 00:38:36

w3schools należy unikać jako źródła, wiele z ich informacji jest niedokładnych. W3C wiki jest przyzwoitą alternatywą http://www.w3.org/wiki/CSS/Training –

to zadziała

<div style="width:800px;"> 
    <div style="width:300px; float:left;"></div> 
    <div style="width:300px; float:right;"></div> 
</div>

Źródło

2013-03-13 00:39:25

Wewnętrzne divy nie są poprawnie zakończone. Notatka dla przyszłych pasterzy. :) –

Dodałem

tuż po tym, aby zapobiec przepłynięciu kolejnych elementów. – Thomas

To bardzo proste:

http://jsfiddle.net/kkobold/qMQL5/

<div id="header"></div> 
<div id="container"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="clear"></div> 
</div>

#header { 
    width: 100%; 
    background-color: red; 
    height: 30px; 
} 

#container { 
    width: 300px; 
    background-color: #ffcc33; 
    margin: auto; 
} 
#first { 
    width: 100px; 
    float: left; 
    height: 300px; 
     background-color: blue; 
} 
#second { 
    width: 200px; 
    float: left; 
    height: 300px; 
    background-color: green; 
} 
#clear { 
    clear: both; 
}

Źródło

2013-03-13 00:40:18

Dziękuję za wpis! – user481610

chodzi o szerokość swojej stronie, będziemy chcieli do rozważyć użycie klasy otoki otoczyć treści (powinno to pomóc ograniczyć swoje szerokości elementów i uniemożliwić im rozszerza zbyt daleko poza treść):

<style> 
.wrapper { 
    width: 980px; 
} 
</style> 

<body> 
    <div class="wrapper"> 
    //everything else 
    </div> 
</body>

Jeśli chodzi o skrzynie treści iść, proponuję próbuje użyjesz

<style> 
.boxes { 
    display: inline-block; 
    width: 360px; 
    height: 360px; 
} 
#leftBox { 
    float: left; 
} 
#rightBox { 
    float: right; 
} 
</style>

Spędziłbym trochę czasu na badaniu modelu box-object i wszystkich właściwości "display". Będą na zawsze pomocni. Zwróć szczególną uwagę na "blok inline", używam go praktycznie każdego dnia.

Źródło

2013-03-13 02:51:14

-1

Na podstawie podanego układu można użyć właściwości pływającej lewej w css.

HTML

<div id="header"> LOGO</div> 
<div id="wrap"> 
<div id="box1"></div> 
<div id="box2"></div> 
<div id="clear"></div> 
</div> 
<div id="footer">Footer</div>

CSS

body{ 
margin:0px; 
height: 100%; 
} 
#header { 

background-color: black; 
height: 50px; 
color: white; 
font-size:25px; 

} 

#wrap { 

margin-left:200px; 
margin-top:300px; 


} 
#box1 { 
width:200px; 
float: left; 
height: 300px; 
background-color: black; 
margin-right: 20px; 
} 
#box2{ 
width: 200px; 
float: left; 
height: 300px; 
background-color: blue; 
} 
#clear { 
clear: both; 
} 
#footer { 
width: 100%; 
background-color: black; 
height: 50px; 
margin-top:300px; 
color: white; 
font-size:25px; 
position: absolute; 
}

Źródło

2014-07-22 20:06:57 prashanth

Jak umieścić dwa pola div obok siebie

Odpowiedz

Powiązane problemy