未在div內顯示圖像

我的div完美對齊。我試圖在中心div中添加一個圖像，但只要我添加圖像divs消失，圖像不顯示。我遇到了添加圖片的問題，請有人幫忙。爲什麼我的圖片沒有顯示我的代碼有什麼問題？未在div內顯示圖像

<style> 
 

 
.div_parent{ 
 

 
    display:inline; 
 
background-image: url('../images/image.jpg') top center no-repeat;" 
 

 
    } 
 
    
 
.div_center { 
 

 

 
    width:300px; 
 
    float:left; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    height :700px 
 
} 
 

 
.div_right 
 
{ 
 
    background-color:#edeeef; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    width: 150px; 
 
    float:left; 
 
    height:100% 
 
} 
 
.div_left 
 
{ 
 
    background-color:#edeeef; 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:3px; 
 
    width: 150px; 
 
    float:left; 
 
    height:100% 
 
} 
 

 

 
</style>

<div class="div_parent"> 
 

 

 
<div class="div_left"> 
 
<br /><br /><br /><br /><br /><br /> 
 
\t \t \t \t \t \t \t <FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br /> 
 
\t \t \t \t \t \t \t <br /> 
 
\t \t \t \t \t \t <FONT size="2" style="font-family:sans-serif; text-align: left;"> \t 
 
\t \t \t \t \t Reports on this site are available as view-only or as an Excel download. </font> 
 
</div> 
 
<div class="div_center"> 
 

 

 
</div> 
 

 
<div class="div_right"> 
 
<br /><br /><br /><br /><br /><br /> 
 
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br /> 
 
\t \t \t \t \t \t \t 
 
<FONT size="2" style="font-family:sans-serif; text-align:left;"> \t 
 
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br /> 
 
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font> 
 

 
</div> 
 
</div>

來源

2017-01-09 CrazyCoder

如何做你想讓他們一致？相同的高度？一個div在另一個下方，寬度對於兩者來說都很小，並將它們左移？ – KujAslani

我想讓它們對齊1 ---- 2 ----- 3兩邊各一個應該像15px一樣，中間一個應該是最寬的。 – CrazyCoder

你有沒有嘗試過這樣的事情嗎？

.container { 
 
    width: 100%; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
.element__left, 
 
.element__right, 
 
.element__center { 
 
    height: 50px; 
 
} 
 
.element__left, .element__right { 
 
    width: 25%; 
 
    float: left; 
 
    background-color: grey; 
 
} 
 
.element__center { 
 
    width: 50%; 
 
    float: left; 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div class="element__left"> 
 
    <div class="element__center"> 
 
    <div class="element__right"> 
 
</div>

來源

2017-01-09 15:52:56 andrixb

你好，非常感謝你的幫助。我想要綠色的那個在中心，並且具有最多的寬度，而另外兩個寬度相同的兩側。當我運行代碼片段時，綠色的左側對齊，而另外兩個灰色的則有不同的大小。 – CrazyCoder

我明白了你的觀點，並且事實上通過在瀏覽器中直接運行代碼正常工作。即使這裏的解決方案看起來也差不多。 – andrixb

.divOuter{ 
 
     display:inline; 
 
     text-align:center; 
 
    } 
 

 
    .divInner1{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:150px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    } 
 
.divInner2{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:250px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    } 
 
.divInner3{ 
 
     border: 1px solid; 
 
     float:left; 
 
     width:150px; 
 
     height:150px; 
 
     margin-left:3px; 
 
     margin-right:3px; 
 
    }

<body> 
 
<div class='divOuter'> 
 
    <div class='divInner1'>First DIV</div> 
 
    <div class='divInner2'>Second DIV</div> 
 
    <div class='divInner3'>Third DIV</div> 
 
</div> 
 
</body>

來源

2017-01-09 16:01:01

你好，我不知道爲什麼，但當使用您提供的相同的確切代碼似乎準確工作，所有我的div垂直對齊，而不是並排。 – CrazyCoder

你申請我的代碼或做任何錯誤，請檢查正確 –

是啊我已經雙重檢查了一切 – CrazyCoder

讓我們試着按以下方式：

<!DOCTYPE html> 
<html class="not-ie" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>aligning 3 divs with different widthst</title> 
<style type="text/css"> 
    * { padding:0; margin:0;} 
    body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;} 
    .div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;} 

    .div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;} 
    .div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;} 
    .div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;} 

</style> 
</head> 

<body> 
    <div class="div_parent"> 
     <div class="div_left">width: 100px;</div> 
     <div class="div_middle">width: screen - 200px;</div> 
     <div class="div_right">width: 100px;</div> 
    </div> 
</body> 
</html>

來源

2017-01-09 16:30:45 Hanif

我的整個頁面是空白:( – CrazyCoder

未在div內顯示圖像

回答

相關問題