Question

我有一组三个元素。部分，包含标题和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;
	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>
	<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>

Answer 1

当您将标题和div都设置为内联块时，它们应该是并排的，但是当您在标题中添加图像时，下一个div正在移动。最好的方法是使用display：flex

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

没有flex的解决方案是使用display：table并将其中的每个内容设为display：table-cell

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助

在添加另一个内部后，元素会自行移位

1 个答案: