元素在添加其他元素後會脫位

我有一組三個元素。部分，包含一個標題和一個div元素。現在我想要做的是在div元素中添加另一個div元素，但是當我這樣做時，兩個元素都會向下移動（從應該出現的位置移開）。元素在添加其他元素後會脫位

HTML：

<div class="main"><!-- main container --> 
     <section class="head"><!-- header section --> 
      <header class="img_header"> 
       <img src="../img/d.jpg"> 
      </header> 
      <div id="head_container"> 
       <div class="side_header"> 
        <h class="mark">Damian</h> Tuszynski<br> 
        Network Solutions Architect 
        <p> 
         Mobile<br> 
        </p> 
        <p> 
         Email<br> 
        </p> 
       </div> 
      </div>   
     </section><!-- header section --> 
</div>

CSS，頁眉組：

.head { 
border: 1px solid green; 
    white-space: nowrap; 
    width:1900px; 
    height:900px; 
} 


    .img_header { 
    border: 1px solid black;  
    display: inline-block; 
    width: 600px; 
    height: 900px; 
    background-color: #E8E2E2; 
    position: relative; 

} 

    #head_container { 
    border: 1px solid orange; 
    display: inline-block; 
    width: 1250px; 
    height: 900px; 

    } 


.img_header img { 

    width: 230px; 
    height: 230px; 
    border-radius: 50%; 
    display: block; 
    margin-top: 300px; 
    margin-left: 280px; 
    position: relative; 

    } 

    .side_header { 

    border: 1px solid blue; 
    width: 1250px; 
    height: 400px; 
    position: relative; 
    display: block; 

    } 

    .mark { 

    color: #A1E3D8; 

    }

我缺少什麼嗎？

.head { 
 
border: 1px solid green; 
 
\t white-space: nowrap; 
 
\t width:1900px; 
 
\t height:900px; 
 
} 
 

 

 
    .img_header { 
 
    \t border: 1px solid black; \t 
 
    \t display: inline-block; 
 
    \t width: 600px; 
 
    \t height: 900px; 
 
    \t background-color: #E8E2E2; 
 
    \t position: relative; 
 

 
} 
 

 
    #head_container { 
 
    \t border: 1px solid orange; 
 
    \t display: inline-block; 
 
    \t width: 1250px; 
 
    \t height: 900px; 
 

 
    } 
 

 

 
.img_header img { 
 

 
    \t width: 230px; 
 
    \t height: 230px; 
 
    \t border-radius: 50%; 
 
    \t display: block; 
 
    \t margin-top: 300px; 
 
    \t margin-left: 280px; 
 
    \t position: relative; 
 

 
    } 
 

 
    .side_header { 
 

 
    \t border: 1px solid blue; 
 
    \t width: 1250px; 
 
    \t height: 400px; 
 
    \t position: relative; 
 
    \t display: block; 
 

 
    } 
 

 
    .mark { 
 

 
    \t color: #A1E3D8; 
 

 
    }

<head> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 

 
<body> 
 
\t \t <section class="head"><!-- header section --> 
 
\t \t \t <header class="img_header"> 
 
\t \t \t \t <img src="../img/d.jpg"> 
 
\t \t \t </header> 
 
\t \t \t <div id="head_container"> 
 
\t \t \t \t <div class="side_header"> 
 
\t \t \t \t \t <h class="mark">John</h> Snow<br> 
 
\t \t \t \t \t Network Solutions Architect 
 
\t \t \t \t \t <p> 
 
\t \t \t \t \t \t Mobile<br> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t \t <p> 
 
\t \t \t \t \t \t Email<br> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 
\t \t \t </div> \t \t \t 
 
\t \t </section><!-- header section --> 
 

 
\t \t 
 
</body>

來源

2016-12-21 CNB

我把你的源小提琴，但顯然我的顯示器是不是足夠大，以正確可視化的問題。很多滾動條。那麼，你可以做一個實際證明這個問題的[mcve]嗎？ –

請同時告訴我們看哪個瀏覽器和平臺。 – JoostS

您可以爲「之前」（工作）和「之後」（不工作）創建小提琴嗎？ – Whothehellisthat

當你在進行報頭和DIV作爲內聯塊它們應該是並排側，但作爲可以在接下來的div移動的報頭添加的圖像。要做到這一點，最好的辦法是使用顯示：彎曲

檢查這個片段

.head { 
 
    border: 1px solid green; 
 
    white-space: nowrap; 
 
    width: 1900px; 
 
    height: 900px; 
 
    display: flex; 
 
} 
 
.img_header { 
 
    border: 1px solid black; 
 
    width: 600px; 
 
    height: 900px; 
 
    background-color: #E8E2E2; 
 
} 
 
#head_container { 
 
    border: 1px solid orange; 
 
    width: 1250px; 
 
    height: 900px; 
 
} 
 
.img_header img { 
 
    width: 230px; 
 
    height: 230px; 
 
    border-radius: 50%; 
 
    display: block; 
 
    margin-top: 300px; 
 
    margin-left: 280px; 
 
} 
 
.side_header { 
 
    border: 1px solid blue; 
 
    width: 1250px; 
 
    height: 400px; 
 
    position: relative; 
 
} 
 
.mark { 
 
    color: #A1E3D8; 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
</head> 
 

 
<body> 
 
    <section class="head"> 
 
    <!-- header section --> 
 
    <header class="img_header"> 
 
     <img src="../img/d.jpg"> 
 
    </header> 
 
    <div id="head_container"> 
 
     <div class="side_header"> 
 
     <h class="mark">John</h>Snow 
 
     <br>Network Solutions Architect 
 
     <p> 
 
      Mobile 
 
      <br> 
 
     </p> 
 
     <p> 
 
      Email 
 
      <br> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <!-- header section --> 
 

 

 
</body>

解決方案，而彎曲，是使用顯示：表，使每一個內容中它作爲顯示器：表細胞

檢查這個片段

.head { 
 
    border: 1px solid green; 
 
    white-space: nowrap; 
 
    width: 1900px; 
 
    height: 900px; 
 
    display: table; 
 
} 
 
.img_header { 
 
    border: 1px solid black; 
 
    display: table-cell; 
 
    width: 600px; 
 
    height: 900px; 
 
    background-color: #E8E2E2; 
 
} 
 
#head_container { 
 
    border: 1px solid orange; 
 
    display: table-cell; 
 
    width: 1250px; 
 
    height: 900px; 
 
    vertical-align: top; 
 
} 
 
.img_header img { 
 
    width: 230px; 
 
    height: 230px; 
 
    border-radius: 50%; 
 
    margin-top: 300px; 
 
    margin-left: 280px; 
 
} 
 
.side_header { 
 
    border: 1px solid blue; 
 
    width: 1250px; 
 
    height: 400px; 
 
} 
 
.mark { 
 
    color: #A1E3D8; 
 
}

<head> 
 
    <meta charset="UTF-8"> 
 
</head> 
 

 
<body> 
 
    <section class="head"> 
 
    <!-- header section --> 
 
    <header class="img_header"> 
 
     <img src="../img/d.jpg"> 
 
    </header> 
 
    <div id="head_container"> 
 
     <div class="side_header"> 
 
     <h class="mark">John</h>Snow 
 
     <br>Network Solutions Architect 
 
     <p> 
 
      Mobile 
 
      <br> 
 
     </p> 
 
     <p> 
 
      Email 
 
      <br> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </section> 
 
    <!-- header section --> 
 

 

 
</body>

希望這有助於

來源

2016-12-22 20:15:25 Geeky

非常感謝！它幫助了很多。 – CNB

元素在添加其他元素後會脫位

回答

相關問題