Question

我一直面临这个问题，当我添加一个div时，它正在重叠在它上方的div上？为了看看div的对齐位置，我给它一个蓝色的背景。我想将搭便车<h1>标签与介绍div下面的页面中心对齐。找到下面的代码 -

我一直面临这个问题，当我添加一个div时，它正在重叠在它上方的div上？为了看看div的对齐位置，我给它一个蓝色的背景。找到下面的代码 -

＆＃13;

          #intro{
             font-family: 'Sansita', sans-serif; 
            font-size: 170%;    
            float: right;                   
            width: 50%;                
            margin-right: 20px;
             margin-left: 10px;
                color: #ff471a ;
            } 
            
            
            
            #introImage { 
            
                float: left;
                width: 40%;
                margin-left: 70px;
                margin-top: 35px;
                box-shadow: 10px 10px grey;
                border-radius: 10px;
            
            }
            
            
             
        
        #hitchhiking-info {
            
            margin-top: 20px;
            width: 100%; 
            height: 100px;
            text-align: center;
            background-color: blue;
            float: none;
            
        }

＆＃13;

</div> 
        
        <div id="intro-div"> 
            
            <p id="intro"> Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world. Fell free to comment any suggestions or feedback of my experiences and contact me for any query </p>    
            
            <img id="introImage" src="intro-image.jpg">
            
            
            
            
        </div> 
        
        <div id="hitchhiking-info">
            
            <h1 id="heading"> Hitchhiking </h1>   
        </div>

＆＃13;

Answer 1

你＆＃34; hitchhiking-info＆＃34;盒子一直显示在顶部是因为你的＆＃34; intro-div＆＃34;框仅包含浮动元素，因此它没有高度。

推动＆＃34; hitchhiking-info＆＃34;通过浮动内容，您可以将clear:both应用于它。这将使它明确＆＃34;清楚＆＃34;向左或向右浮动的内容。

另一种选择是将clearfix类应用于＆＃34; intro-div＆＃34; （或给它一个明确的高度，使其包含所有它的浮动内容）。查看下面的简单clearfix并阅读有关它们的更多信息here。

clear:both示例：

＆＃13;

#intro {
  font-family: 'Sansita', sans-serif;
  font-size: 170%;
  float: right;
  width: 50%;
  margin-right: 20px;
  margin-left: 10px;
  color: #ff471a;
}
#introImage {
  float: left;
  width: 40%;
  margin-left: 70px;
  margin-top: 35px;
  box-shadow: 10px 10px grey;
  border-radius: 10px;
}
#hitchhiking-info {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: blue;
  float: none;
  clear: both;
}

＆＃13;

<div id="intro-div">
  <p id="intro">Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a
    proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world.
    Fell free to comment any suggestions or feedback of my experiences and contact me for any query</p>
  <img id="introImage" src="intro-image.jpg">
</div>
<div id="hitchhiking-info">
  <h1 id="heading"> Hitchhiking </h1> 
</div>

＆＃13;

Clearfix示例：

＆＃13;

#intro {
  font-family: 'Sansita', sans-serif;
  font-size: 170%;
  float: right;
  width: 50%;
  margin-right: 20px;
  margin-left: 10px;
  color: #ff471a;
}
#introImage {
  float: left;
  width: 40%;
  margin-left: 70px;
  margin-top: 35px;
  box-shadow: 10px 10px grey;
  border-radius: 10px;
}
#hitchhiking-info {
  margin-top: 20px;
  width: 100%;
  height: 100px;
  text-align: center;
  background-color: blue;
  float: none;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

</div>

<div id="intro-div" class="clearfix">
  <p id="intro">Hello There! I have made this website to share my experiences of hitchhiking, which is my full time job. I want to inspire other hitchhikers as well and inspire people. This website will hopefully clear all your misconceptions about hitchhiking as a
    proffession, as it is underrated and critisized by people. However I have a very different perspective about hitchhiking, you will get to know about it through my website. This website is a mean I will be using to reach to people around the world.
    Fell free to comment any suggestions or feedback of my experiences and contact me for any query</p>
  <img id="introImage" src="intro-image.jpg">
</div>
<div id="hitchhiking-info">
  <h1 id="heading"> Hitchhiking </h1> 
</div>

＆＃13;

Answer 2

function forEach(array, f) {
    var len = array.length,
        i;

    for (i = 0; i < len; i ++) {
        if (f(array[i], i, array)) {
            return array[i];
        }
    }
}

var cb = function (v) { console.log('value', v); return v === 23; };

console.log('result', forEach([1, 2, 3, 4, 5, 23, 6, 7], cb));
console.log('result', forEach([1, 2, 3, 4, 5, 6, 7, 33], cb));

<div>的内容与另一个<div>重叠？

2 个答案: