我如何让我的div定位为我想要的，CSS

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

尝试删除该属性

˚F loat：留给图片div 或者你可以把两个div分别放在一个大格子里面，你想在右格子里面放上另一个div。

Answer 2

根据您提供的信息，我认为您正在尝试制作2列布局。如果你将所有div容器都放在左边，因为你在html中最后添加了“about”div，并且因为你的第一个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，我敢肯定，如果你谷歌的话，你会发现其他网格方法（如上所述），这将使你的布局轻松许多。希望这可以帮助。