Question

我有一个用于我正在工作的网站的容器，除非我将margin: 0 auto放在父容器中而不希望这样做，否则我似乎无法使文本与容器保持一致弄乱了我的定位。还有其他适合文本的方式吗？

这是代码：

div.TadobaWrapper {
  background-color: #44511E;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 600px;
}
div.Tadoba img{
  margin: auto;
  float: left;
  position: relative;
  top: 105px;
  left: 320px;
  width: 250px;
  height: 400px;
}
div.TadobaContainer {
  width: 35%;
  height: 270px;
  background-color: white;
  position: relative;
  top: 135px;
  left: 40%;
  box-sizing: border-box;
  box-shadow: 5px 5px 5px;
}
div.TadobaContainer section h1 {
  font-size: 25px;
  width: 600px;
  text-transform: uppercase;
  padding: 20px 0 0 20px;
}
div.TadobaContainer section p {
  text-align: center;
  font-size: 1.2vw;
  line-height: 30px;
  text-align: justify;
  padding: 10px 30px 0;
}
div.TadobaContainer section a {
  color: #54E112;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
  float: right;
  margin: 0 20px 10px;
}
div.TadobaContainer section a:hover {
  border-bottom: 2px solid black;
}

<div class="TadobaWrapper">
 <div class="Tadoba"> <img src="Tadoba/21.JPG"/>
 <div class="TadobaContainer">
  <section>
    <h1>Tadoba Andhari Tiger Reserve</h1>
    <p> Tadoba Andhari Tiger Reserve is a wild animal reservation in the 
     Chandrapur district of Maharashtra state in India, widely known as 
     Maharashtra’s oldest and largest national park. The park contains many 
     different animals including, Tigers, leopards, Dear and various other 
      wild animals.   </p>
     <a href="#" class="lrnmoretadoba">Learn More</a> </section>
   </div>
</div>
</div>

Answer 1

将position中的div.TadobaContainer从relative更改为absolute，就变成了这样：

div.TadobaContainer {
    width: 35%;
    height: 270px;
    background-color: white;
    position: absolute;
    top: 135px;
    left: 40%;
    box-sizing: border-box;
    box-shadow: 5px 5px 5px;
}

<h1>标题可能不在TadobaContainer内的原因是其固定宽度。容器中也可能包含太多文本。

Answer 2

检查更新的代码。希望对您有帮助。

div.TadobaWrapper{
background-color: #44511E;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 600px;
}
div.Tadoba img{
    margin: auto;
    float: left;
    position: relative;
    top: 105px;
    left: 320px;
    width: 250px;
    height: 400px;
}
div.TadobaContainer{
    width: 35%;
  
    background-color: white;
    position: absolute;
    top: 135px;
    left: 50%;
    box-sizing: border-box;
    box-shadow: 5px 5px 5px;
}
div.TadobaContainer section h1{
font-size: 25px;
    /* width: 600px; */
    text-transform: uppercase;
    /* margin: auto; */
    padding: 20px 0 0 20px;
}
div.TadobaContainer section p{
text-align: center;
font-size: 1.2vw;
line-height: 18px;
text-align: justify;
padding: 10px 30px 0;
}
div.TadobaContainer section a{
color: #54E112;
text-transform: uppercase;
font-size: 20px;
text-decoration: none;
float: right;
margin: 0 20px 10px;
}
div.TadobaContainer section a:hover{
border-bottom: 2px solid black;
}

<div class="TadobaWrapper">
 <div class="Tadoba"> <img src="https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg"/>
 <div class="TadobaContainer">
  <section>
    <h1>Tadoba Andhari Tiger Reserve</h1>
    <p> Tadoba Andhari Tiger Reserve is a wild animal reservation in the 
     Chandrapur district of Maharashtra state in India, widely known as 
     Maharashtra’s oldest and largest national park. The park contains many 
     different animals including, Tigers, leopards, Dear and various other 
      wild animals.   </p>
     <a href="#" class="lrnmoretadoba">Learn More</a> </section>
   </div>
</div>
</div>

div中不包含没有空白的文本：0自动

2 个答案: