Próbuję utworzyć div#firstdiv. Wewnątrz ten div mam inne div#otherdiv, a szerokość z nich jest% #firstdiv. Ponadto, inne Div mają określony margines, który nie powinien być pod wpływem drugiego {{x3} Pozwólcie zobaczyć przykład. Mam :

<div style=" width: 500px; border: 2px solid red; height: 150px; >
     <div style="width: 100%; position: absolute; border: 1px solid blue; >here<div>
</div>

I mam następujący wynik:

enter image description here

I chcę, żeby Błękitna Div była wewnątrz czerwonego. Działa, jeśli zrobię position absolute, jeśli miałem kolejny #otherdiv W lewo zależą od tego, co już tam jest i nie chcę tego.

Mam to wszystko zmienić: pracuję z bootstrapem i moim dwoma nurkowaniem są w środku

<div class="container-fluid container-first"><div class="container">

0
Sylvain Attoumani 4 czerwiec 2018, 17:22

4 odpowiedzi

Najlepsza odpowiedź

Position: absolute Usuwa element z normalnego przepływu treści. Jego rodzic zachowuje się, jakby element absolute nie ma w ogóle. Dlatego musisz stosunkowo pozycjonować jego rodzica. Dodaj position:relative dla tego rodziców. Aby uzyskać więcej informacji, odwiedź css-tricks .

<div style=" width: 500px; border: 2px solid red; height: 150px; position: relative" >
     <div style="width: 100%; position: absolute; border: 1px solid blue;" >here<div>
</div>
1
mahan 6 lipiec 2018, 17:39

Dodaj position relative do rodzica

<div style=" width: 500px; border: 2px solid red; height: 150px; position: relative" >
             <div style="width: 100%; position: absolute; border: 1px solid blue;">here</div>
        </div>
1
Friday Ameh 4 czerwiec 2018, 14:29

Nie powinieneś potrzebować pozycji: absolutnie, co próbujesz osiągnąć.

Element wewnętrzny {x0}} z niebieskimi granicami powinno automatycznie stać się elementem typu bloku i wypełnić szerokość elementu macierzystego.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>        
</head>

<body>
    <div style="width: 500px; border: 2px solid red; height: 150px;">
        <div style="border: 1px solid blue;">
            here
        </div>
        <div style="border: 1px solid blue;">
            otherDiv
        </div>
    </div>

</body>

</html>
1
Varlain Systems 4 czerwiec 2018, 14:34

Umieść float:left; do wewnętrznego div i usuń position:absolute;, powinno to działać.

-4
Roshana Pitigala 4 czerwiec 2018, 17:02