未在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内显示图像

回答

相关问题