Question

我不确定如何说出来，所以如果我需要提供更多信息，请告诉我。

在我网站的“联系”页面上，我有一个包含我的联系信息的div（名为＆＃34; left＆＃34;）。另一个div（称为＆＃34; text＆＃34;）包含一些文本段落，位于＆＃34; left＆＃34;的右侧。 DIV。＆＃34;左边＆＃34; div设置为30％宽度，＆＃34;文本＆＃34; div宽度为70％。我期待文本＆＃34;文本＆＃34; div会包裹＆＃39;向下，作为＆＃34;文本＆＃34; div变得更小（因为窗口调整大小），但只要两个div内的内容接触，＆＃34;文本＆＃34; div下降到＆＃34; left＆＃34;格。

知道为什么吗？我在下面添加了一张图片来显示页面的布局。还有与这些div相关的HTML和CSS。谢谢。目前，我只是使用媒体查询来调整＆＃34;文本＆＃34; div随着窗口变小，所以它永远不会触及＆＃34; left＆＃34; div，但这很挑剔。

＆＃13;

.body-container {
  width: 70%;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -0%);
  -moz-transform: translate(-50%, -0%);
}
@media screen and (max-width: 1300px) {
  .body-container {
    width: 80%;
  }
}
@media screen and (max-width: 1150px) {
  .body-container {
    width: 85%;
  }
}
@media screen and (max-width: 1000px) {
  .body-container {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .body-container {
    width: 95%;
  }
}
.profile {
  padding: 0;
  margin: 0;
}
.profile img {
  margin: 100px 0 0 0;
  padding: 0;
  width: 200px;
  height: 200px;
  opacity: 0.9;
  border: 3px solid white;
  border-radius: 100px;
  float: left;
}
.details {
  margin: 310px 0 0 -200px;
  padding: 0;
  color: white;
  float: left;
  font-size: 15px;
  font-weight: bold;
}
form {
  padding: 0;
  margin: -10px 0 0 0;
  float: left;
}
label {
  display: block;
  margin: 10px 0 0 0;
  padding: 0;
  font-weight: bold;
  font-size: 15px;
}
input {
  width: 200px;
  border: 1px solid #D8D8D8;
  color: #585858;
  border-radius: 3px;
  -webkit-border-radius: 3px;
}
textarea {
  width: 200px;
  height: 100px;
  border: 1px solid #D8D8D8;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #585858;
  resize: none;
}
.submit {
  opacity: 0.9;
  background-color: lightgray;
  position: absolute;
  margin: 115px 0 0 -200px;
}
.submit:hover {
  opacity: 1.0;
}
.left {
  width: 246px;
  position: fixed;
}
.name {
  margin: 0;
  font-family: Advent Pro;
  font-size: 40px;
  font-weight: 400;
}
.text {
  margin: 100px 0 0 0;
  padding: 0;
  float: right;
  text-align: left;
  color: white;
  font-size: 15px;
  font-weight: 500;
  width: 70%;
}
@media screen and (max-width: 850px) {
  .text {
    width: 65%;
  }
}
@media screen and (max-width: 650px) {
  .text {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  .text {
    width: 55%;
  }
}

＆＃13;

<div class="body-container">

  <div class="left">

    <div class="profile">

      <img src="images/profile.png" />

    </div>

    <div class="details">

      <p class="name">Tim Corin</p>
      <p>Phone: 12 3456 7890</p>
      <p>Mobile: 123 456 7890</p>
      <p>Email: tim@notrealemail.com</p>
      <p>Contact Form:</p>

      <form method="post" action="index.php">

        <label>Name</label>
        <input name="name" />

        <label>Email</label>
        <input name="email" type="email" />

        <label>Message</label>
        <textarea name="message"></textarea>

        <input class="submit" name="submit" type="submit" value="send">

      </form>

    </div>

  </div>

  <div class="text">

    <p>I'm so glad you discovered my work! This could be the start of a fantastic adventure, as I capture your special moments. First, let me share a little about myself...</p>
    <p>I like to think that I'm a friendly, fun-loving, and creative person. My photographic journey began in 2011, when I received a camera for my 13th birthday. Within the first year, the sensor was covered in dust. But it served me for almost three years,
      and most importantly, it lit the photographic flame that's been burning ever since.</p>
    <p>My family loves to travel. I've lived in Japan, New Zealand, and Australia. I've travelled uncountable miles in Australia, traversing the countryside from Brisbane to the tip of Cape York.</p>
    <p>Where am I now? Julatten, where life is nothing short of spectacular. Rolling green hills, beautiful cool breezes, and exotic wildlife. It's almost paradise, the perfect spot for a keen photographer.</p>
    <p>I'm a two-time Mossman Show Under-18 Photography Champion. This year, I was named Reserve Champion Photographer at the Mossman Show.</p>
    <p>I love shooting everything, though my main interests are nature and events. If I sound like your kind of photographer, please contact me!</p>

  </div>

</div>

＆＃13;

Answer 1

试试float：left为左div并从右边div中移除float：

Answer 2

您是否尝试在文本div的css中添加docker run --name postgres -d \ --env='DB_NAME=redmine_production' \ --env='DB_USER=redmine' \ --env='DB_PASS=secret' \ --volume=/home/me/redmine/postgresql:/var/lib/postgresql/data \ postgres？

文字没有环绕另一个div

2 个答案: