如何将<img/>准确地放在html中的另一个<img/>下？

时间：2018-02-03 13:16:47

标签： html css

我想在左边放两张图片，在右边放一张桌子。目前我左边有一张照片，右边是一张桌子，另一张照片是我想要另一张<img>的地方。当我尝试放置我的第二个<img>时，它仍然在左边但在桌子下面，因为它比第一个图像长2倍。这是我的代码：

th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}

#td {
	opacity: 0.2;
}

.table{
    height: 654px;
    float: left;
    width: 55%;
    border: 2px solid aqua;
    text-align:center;
}
<!-- first picture -->
 <div> <img id="VY_Canis_Majoris_vs_sun"  src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
 
 <!-- the one that should be under the first picture, but it is next to it --> 
  <div> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>

 <div  class="table"> <table width="100%" height="100%">
   <tr>
    <td>text</td>
    <td> text</td> 
  </tr>
  <tr>
    <td>Mass</td>
    <td>8 solar mass units </td> 
  </tr>
  <tr>
    <td>Radius</td>
    <td>1,708 ± 192 R☉</td> 
  </tr>
  <tr>
    <td>Luminosity</td>
    <td>340,000 L☉</td> 
  </tr>
  <tr>
    <td>Surface gravity</td>
    <td>Surface gravity (log g) −0.5 cgs</td> 
  </tr>
    <tr>
    <td>Temperature</td>
    <td>3,365±134 K</td> 
  </tr>
</table> </div>

6 个答案:

答案 0 :(得分：1)

将两张图片封装在一个div中

<div class="myimg">
<!-- first picture --> 
<img id="VY_Canis_Majoris_vs_sun"  src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;">

 <!-- the one that should be under the first picture, but it is next to it --> 
  <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>

 <div  class="table"> <table width="100%" height="100%">
   <tr>
    <td>text</td>
    <td> text</td> 
  </tr>
  <tr>
    <td>Mass</td>
    <td>8 solar mass units </td> 
  </tr>
  <tr>
    <td>Radius</td>
    <td>1,708 ± 192 R☉</td> 
  </tr>
  <tr>
    <td>Luminosity</td>
    <td>340,000 L☉</td> 
  </tr>
  <tr>
    <td>Surface gravity</td>
    <td>Surface gravity (log g) −0.5 cgs</td> 
  </tr>
    <tr>
    <td>Temperature</td>
    <td>3,365±134 K</td> 
  </tr>
</table> </div>

然后添加此css 

.myimg{
    float: left;
    width: 44%;
}

答案 1 :(得分：0)

将float:left提供给两个图片div标签。

＆＃13;
＆＃13; 
th { color: white; padding: 10px; }
td { color: white; padding: 10px; border-bottom: 1px solid aqua; }
tr { opacity: 0.8; }
tr:hover {background-color: #72FFBB;}
.d1{
float:left;
height:100px;
width:100px;
}
#td {
	opacity: 0.2;
}

.table{
    height: 654px;
    float: left;
    width: 55%;
    border: 2px solid aqua;
    text-align:center;
}
＆＃13; 
<!-- first picture -->
 <div class="d1"> <img id="VY_Canis_Majoris_vs_sun"  src="VY_Canis_Majoris_vs_sun.png" width="44%" height="50%" style= "float: left;"> </div>
 
 <!-- the one that should be under the first picture, but it is next to it --> 
  <div class="d1"> <img id="VY_Canis_Majoris_vs_sun" src="Sol_VY_Canis_Majoris.png" width="44%" height="50%" style="z-index: -1;"> </div>

 <div  class="table"> <table width="100%" height="100%">
   <tr>
    <td>text</td>
    <td> text</td> 
  </tr>
  <tr>
    <td>Mass</td>
    <td>8 solar mass units </td> 
  </tr>
  <tr>
    <td>Radius</td>
    <td>1,708 ± 192 R☉</td> 
  </tr>
  <tr>
    <td>Luminosity</td>
    <td>340,000 L☉</td> 
  </tr>
  <tr>
    <td>Surface gravity</td>
    <td>Surface gravity (log g) −0.5 cgs</td> 
  </tr>
    <tr>
    <td>Temperature</td>
    <td>3,365±134 K</td> 
  </tr>
</table> </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

试试这个： 

th {
  color: white; padding: 10px;
}

td {
  color: white;
  padding: 10px;
  border-bottom: 1px solid aqua;
}

tr {
  opacity: 0.8;
}

tr:hover {
  background-color: #72FFBB;
}

#td {
  opacity: 0.2;
}

.table{
  height: 654px;
  float: left;
  width: 55%;
  border: 2px solid aqua;
  text-align:center;
}

.wrapper {
  float: left;
  width: 30%;
}

div img {
  width: 100%;
  margin-bottom: 5px;
}

.table {
  float: right;
  width: 65%;
}
<div class="wrapper">
  <div>
    <img id="VY_Canis_Majoris_vs_sun"  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="44%" height="50%">
  </div>
  <div>
    <img id="VY_Canis_Majoris_vs_sun" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" width="44%" height="50%" style="z-index: -1;">
    </div>
</div>
<div  class="table">
  <table width="100%" height="100%">
    <tr>
	  <td>text</td>
	  <td> text</td> 
	</tr>
	<tr>
	  <td>Mass</td>
	  <td>8 solar mass units </td> 
	</tr>
	<tr>
	  <td>Radius</td>
	  <td>1,708 ± 192 R☉</td> 
	</tr>
	<tr>
	  <td>Luminosity</td>
	  <td>340,000 L☉</td> 
	</tr>
	<tr>
	  <td>Surface gravity</td>
	  <td>Surface gravity (log g) −0.5 cgs</td> 
	</tr>
	<tr>
	  <td>Temperature</td>
	  <td>3,365±134 K</td> 
	</tr>
  </table> 
</div>

答案 3 :(得分：0)

也许你在找什么：

.container,
.images-container {
  display: flex;
}

.container {
  flex-direction: row;
}
.images-container,.table-container {
  width:50%;
}

.images-container {
  flex-direction: column;
}
.images-container img{
  max-width:100%;
  height:200px;
  object-fit:cover;
}

/* Table styling */
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;    
    background-color: #f1f1c1;
}
<div class='container'>
  <div class='images-container'>
    <img src="http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg" />
    <img src="http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif" />
  </div>
  <div class='table-container'>
    <table id='t01' style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
      </tr>
    </table>
  </div>
</div>

答案 4 :(得分：0)

您可以将图像分组为1个div并将其浮动到左侧。

<div id="pictures">
   <img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400">
   <img id="VY_Canis_Majoris_vs_sun" src="https://picsum.photos/400/400?image=42">
</div>

在你的CSS中，你可以给这个div宽50％（并浮动它）

#pictures {
    width: 50%;
    float: left;
}

如果你想让你的照片在彼此之下，你可以在图像上放置显示块并使它们填满空间（宽度：100％）

#pictures img {
    display: block;
    width: 100%;
    height: auto;
}

你在桌子上放了一个边框，以使其适合你可以将宽度放在50％ - 4px（每边2px边框）上。使用calc（计算的简称）：

.table {
    width: calc(50% - 4px);
    ...
}

您可以在这里找到所有代码：https://jsbin.com/rejuburaka/edit?html,css,output

答案 5 :(得分：0)

我认为您无法在另一个<img />代码下使用<img />代码，因为<img />是单行html代码。你可以做这样的事情

<style>
   .full-div{
      width: 100%;
      height: auto;
      margin: 0 auto;
   }
   .left-side{
      width: 100%;
      height: auto;
      margin: 0 auto;
   }
   .first-div,.second-div,.third-div{
      width: 33%;
      height: auto;
      margin: 0 auto;
   }
</style>
<div class="full-div">
    <div class="left-side">
        <div class="first-div">
            <img src="your image source" />
        </div>
        <div class="second-div">
            <img src="your image source" />
        </div>
        <div class="third-div">
            <img src="your image source" />
        </div>
    </div>
    <div class="right-side">
     your table here
    </div>
</div>
相关问题
最新问题