我正在努力将两个div互相排列,有人建议吗?我在CSS中尝试的一切都不像Float(img-1):Left和Float(img-2):右,显示:内联块等 .
<div class="multimedia-img">
<div class="img-1">
<a href="https://www.youtube.com/">
<img src="images/youtube.png" style="width: 200px; height: 140px;">
</a>
</div>
<div class="img-2">
<a href="https://www.ted.com/talks">
<img src="images/ted.png" style="width: 200px; height: 160px;">
</a>
</div>
</div>
EDIT:
我在下面添加了CSS,向您展示我到目前为止所做的工作......
body{
margin: 0;
padding: 0;
text-align: center;
background-color: #505050;
height: auto;
min-height: 100%;
}
.container{
width: 1000px;
margin: 0 auto;
background-color: white;
display: block;
overflow: auto;
}
.content{
width: 100%;
margin: auto;
padding-bottom: 5px;
color: #1B0C0C;
height: 114px;
text-align: center;
padding-top: 40px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
white-space: pre-line;
}
.hobbies{
margin: auto;
width: 100%;
}
.img-hobby {
width: 50%;
height:100%;
float: left;
margin-top: 47px;
margin-right: -295px;
}
.text-hobby {
height: 100%;
margin-top: 8%;
margin-left: 20%;
}
.friends{
margin: auto;
width: 100%;
}
.img-friends{
width: 50%;
height:100%;
float: left;
}
.text-friends{
height: 100%;
margin-top: 8%;
margin-left: 20%;
}
.multimedia-img{
display: inline-block;
}
.img-1{
width: 50%;
float: left;
}
.img-2{
width: 50%;
float: right;
}
img{
padding-top: 17px;
border-radius: 125px;
}
p{
font-weight: bold;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
top: 0;
width: 100%;
overflow: hidden;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #61C8ED;
}
li a:hover:not(.header) {
background-color: #000000;
}
.header{
background-color: #61C8ED;
}
5 回答
尝试添加display:inline-block
Float
你浮动两个div并清除父元素,例如与
overflow:hidden;
Flexbox
将父级设置为
display: flex;
在这里,我想你想做到这一点
https://jsfiddle.net/yec8p3vt/
html
CSS
你可以做到两件事:
要么:
我会推荐Flexbox . 太简单 :)
http://caniuse.com/#feat=flexbox