不能让div与其他div相邻

时间:2017-03-09 01:23:50

标签: javascript jquery html css

所以我有点麻烦让这个div成为另一个div的旁边。

因为这是kina很难直接问我做了一个简短的视频解释问题所以你们可以看到我在说什么。我认为这是一个简单的解决方案我只是错过了一些简单我是一个相当新的编码器,所以如果你们能帮助我,那就太棒了!谢谢!下面我有链接到视频,代码和网站的图像只是因为它有任何帮助。感谢!!!

VIDEO:https://youtu.be/rAYbNX8mYFI
HTML: http://pastebin.com/5m32NDJk
CSS: http://pastebin.com/tsVFaPux
IMAGE: http://imgur.com/a/iRWqO

#infosection{
width: 1024px;
height: 285px;
margin: auto;
display: block;
}

#title{
font-family: effra;
font-weight: normal;
font-size: 12px;
color: #ffa200;
float: left;
padding-left: 50px;
padding-top: 50px;
clear: both;
}

#name{
font-family: effra;
font-weight: bold;
color: #dfdfdf;
font-size: 30px;
padding-left: 50px;
padding-top: 30px;
float: left;
clear: both;

}

#info{
font-family: effra;
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: black;
float: left;
padding-top: 25px;
padding-left: 50px;
width: 286px;
clear: both;
}


#name2{
font-family: effra;
font-weight: bold;
color: black;
font-size: 30px;
padding-left: 100px;
padding-top: 30px;
float: left;
clear: both;
}

#infotwo{
float: left;

}

#infoone{
float: left;
}


#info2{
font-family: effra;
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: black;
float: left;
padding-top: 25px;
padding-left: 100px;
width: 552px;
clear: both;
float: left;


}




#togglediv1{
font-family: effra;
font-size: 18px;
font-weight: bold;
color:  ;
padding-top: 42px;
padding-left: 100px;
text-decoration: none;
float: left;
}

#togglediv2{
font-family: effra;
font-size: 18px;
font-weight: bold;
color: ;
padding-top: 42px;
padding-left: 100px;
text-decoration: none;
float: left;

}

#togglediv3{
font-family: effra;
font-size: 18px;
font-weight: bold;
color: ;
padding-top: 42px;
padding-left: 100px;
text-decoration: none;
float: left;

}



li {
  color: grey;
 font: effra;
 font-weight: bold;
 list-style-type: none;
  }

a:hover { 
color: #aaaaaa;
cursor: pointer;
}



.active, .active-start{
  color: orange;

}

.display{
  display: none;
}

 .display-start{
 display: block;
 }

 #text{
 display:block;
  }

Bonues问题:按下播放按钮时视频无法播放。如果你看错了,如果你告诉我,我们将不胜感激。谢谢!

**编辑:解决方案可能不像浮动某处那样简单,我可能需要在某处填充。

**我知道我应该在这里粘贴代码,正在处理它

2 个答案:

答案 0 :(得分:0)

如果你在将两个div并排放置时遇到问题,那么你可以为每个div使用“float:left”和“width:50%”的样式。

答案 1 :(得分:0)

主要问题是#infotwo的子元素中有这么多的设置宽度和高度。

要解决不太好的问题,请添加以下代码:

#infoone {
  float: left;
  width: 33%;
}

#infotwo {
  float: left;
  width: 67%;
}

这将填充1024px的宽度。解决此问题的更好方法是不在#infotwo中使用固定宽度或高度。

JSfiddle