Question

我正在为我的学校投资组合（我是Mediacollege Amsterdam的开发人员），我需要帮助我的CSS。我已经搜索了答案，但我无法按照需要获取我的页面。我有3个div，我希望它们中的2个彼此相邻，第三个在第一个下面，我将如何做到这一点？

我希望图片在哪里，我想要以“我的任务”开头的块，但我希望以“关于游戏”开头的块直接位于图像下方

这就是我如何对div进行排序，div游戏玩法是视频，div信息是“我的任务”块，而div是“关于游戏”块。

<div class="item">
  <div class="legend">Fear The Blue</div>
  <div class="content">
    <div class="gameplay">
      <video autoplay loop muted>
          <source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
          <source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
          Video not available :(
        </video>
    </div>
    <div class="info">
      <span class="tit">My tasks:</span>
      <ul>
        <li>Puzzle logic</li>
        <li>First puzzle</li>
        <li>Second puzzle</li>
        <li>Audio Manager</li>
        <li>Controller support</li>
        <li>Inventory</li>
        <li>Outline Shader</li>
        <li>Movement</li>
        <li>Start menu</li>
        <li>VR support</li>
        <li>Keypad logic</li>
        <li>Performance improvements</li>
        <li>Door/teleport logic</li>
      </ul>

      <span class="tit">Engine:</span> <a href="https://unity3d.com/" target="_blank">Unity3D</a>
      <br />
      <span class="tit">Language:</span> C#
      <br />
      <span class="tit">team:</span>
      <ul>
        <li>2 programmers</li>
        <li>3 artists</li>
        <li>2 mediamanagers</li>
      </ul>
    </div>
    <div class="about">
      <span class="tit">About the game:</span>
      <ul>
        <li>Single player puzzle game</li>
        <li>Oculus support</li>
        <li>Best played with controller</li>
      </ul>

      I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
    </div>
  </div>
  <div class="foot">
    <a href="https://github.com/JonathanKievits/FearTheBlue" target="_blank"><img class="git" src="resources/images/resources/GithubIcon.png" /></a>
    <!--<a href="https://youtu.be/Ap8TlIlX6l8" target="_blank"><img class="trailer" src="Images/resources/filmklapper.png"/></a>-->
    <a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
    <a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
  </div>
</div>

我的完整css：

.item
{
  font-family: normalFont, sans-serif;
  margin: 0.9em auto 0.5em auto;
  background-color: #222222;
  border-radius: 1em;
  display: block;
  color: white;
  width: 95%;
}

.item .legend
{
  font-family: headerFont, sans-serif;
  border-top-right-radius: .5em;
  border-top-left-radius: .5em;
  padding: 0.2em 0 0.2em 0.4em;
  background-color: #4CAF50;
  font-size: 1.2em;
}

.item .content{padding: .5em;}

.item .gameplay
{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}

.item .info
{
  text-align: left;
  display: block;
  height: auto;
}

.item .info :visited,
.item .info a:link
{
  text-decoration: none;
  color: darkorange;
}

.item .info a:hover
{
  text-decoration: underline;
  color: lightblue;
}

.tit{color: #4CAF50;}

.item ul
{
  padding: 0 0 0 1em;
  margin: 0;
}
.item li{list-style-type: "- ";}

.item .foot
{
  border-radius: 0;

  border-bottom-right-radius: .5em;
  border-bottom-left-radius: .5em;
  background-color: #4CAF50;
  width: 100%;
  height: 2em;
}

.item .foot a
{
  margin: 0.05em 0 0 0.6em;
  display: inline-block;
  width: 30px;
  float: left;
}

.item .foot img
{
  cursor: pointer;
  width: 100%;
}

.item .foot .game, .item .foot .git{margin-top: 1px;}

#popup .message
{
  text-align: center;
  margin: 1em;
}

#popup
{
  width:11em;
  border-radius: .5em;
  outline:none;
  height:7em;
  background-size: 100% 100%;
  background-color: #333;
  z-index:2;
  position:absolute;
  margin:0 0 0 -4.56em;
}

.input-group
{
  width: 85% !important;
  margin: .5em auto !important;
}

.input-field
{
  background-color: #222 !important;
  border: 1px solid #111 !important;
}

.input-field:hover
{
  background-color: #111 !important;
}

.icon-background
{
  border: 1px solid #111 !important;
}

@media screen and (min-width:600px){.item{width: 80%;}}

@media screen and (min-width:1000px)
{
  .item{width: 60%;}
  .item .legend{font-size: 2em;}

  .item .gameplay
  {
    display: inline-block;
    margin-top: .3em;
    width: 25em;
    float: left;
  }
  .item .about
  {
     width: 20em;
  }
  .item .info
  {
    display: inline-block;
    margin: 0 0 0 1em;
    max-width: 40%;
  }
}

的问候，达尼

Answer 1

尝试删除属性

float：左边是图像div 或者你可以把两个想要一个在另一个下面的div放在一个大div中，把你想要的div放在另一个div的外面。

Answer 2

根据您提供的信息，我认为您正在尝试制作2列布局。如果你将所有div容器浮动到左侧，因为你在html中添加了你的“about”div，并且因为你的2个第一个div占据了容器的整个宽度，你的第三个div将位于div的下方最高的。如果你想避免这种情况你应该使用2个div（每列一个）。将它们向左浮动并将您的内容添加到各自的列中。

.container {
  position: relative;
  width:100%;
  }
  
 .col1{
  position: relative;
  float:left;
  width:60%;
 }
 
 .col2 {
  position: relative;
  float: left;
  width: 40%;
 }
 
 img {
    max-width:100%;
  }

<div class="container">
  <div class="col1">
    <div class="image">
      <img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg"  />
    </div>
    <div class="about">
      bla bla bla
    </div>
  </div>
  <div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.

Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.

Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.

</div>
</div>

这是非常基本的CSS，我敢肯定，如果你足够google，你会发现其他网格方法（如上所述），这将使你的布局更容易。希望这会有所帮助。

如何根据需要定位我的div，CSS

2 个答案: