Question

我的Divs完美对齐。我想在中心div中添加一个图像，但是一旦我添加图像，div就消失了，图像也没有显示。我有添加图片的问题，有人可以请你协助。为什么我的图片没有显示我的代码有什么问题？

＆＃13;

<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>

＆＃13;

<div class="div_parent">


<div class="div_left">
 <br /><br /><br /><br /><br /><br />
							<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
							<br />
						<FONT size="2" style="font-family:sans-serif; text-align: left;">	
					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 />
							
<FONT size="2" style="font-family:sans-serif; text-align:left;">	
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>

＆＃13;

Answer 1

你有没有试过这样的东西？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

.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>

Answer 3

让我们尝试以下方式：

<!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>

图像没有在div中显示

3 个答案: