Html 潜水艇不能并排漂浮_Html_Css

Html 潜水艇不能并排漂浮

html css

Html 潜水艇不能并排漂浮,html,css,Html,Css,我需要帮助解决我的浮动div没有并排对齐的问题，因为它们目前彼此低于对方。包含在另一个可以正确浮动的div中。 JSIDLE链接：这是我的HTML摘要： <body> <div id="left"> ... </div> <div id="right"> <div class="thumb"> ... </div> <div class="thumb"> ... </d

我需要帮助解决我的浮动div没有并排对齐的问题，因为它们目前彼此低于对方。包含在另一个可以正确浮动的div中。 JSIDLE链接：

这是我的HTML摘要：

<body> 
    <div id="left"> ... </div>
    <div id="right"> 
    <div class="thumb"> ... </div>
    <div class="thumb"> ... </div>
    </div>
</body>

通过将css

display

-属性更改为

table cell

，可以轻松实现您想要实现的目标

以下代码起作用：

/* 4. large desktop view */
@media screen and (min-width: 1200px) {

#left{
    width:25%;
    padding:3% 5% 0% 5%;
    display:table-cell;
    float:left;
}

#right{
    width:65%;
    display:table-cell;
    float:left;
    padding:30px 0px 0px 0px;
}

.thumb{
    width:30%;
    float:left;
    padding-top:20px;
    display:block;
    box-sizing:border-box;
}

只需更改

显示：block至显示：内联块一切都应该正常工作

#左{
宽度：25%；
填充：3%5%0%5%；
显示：内联块；
浮动：左；
}
#对{
宽度：65%；
显示：内联块；
浮动：左；
填充：30px 0px 0px 0px；
}
.拇指{
宽度：30%；
浮动：左；
填充：20px 2.5px 0px 0px；
显示：内联块；
}

... 
... 
... 
移动视图代码清除：两个
都被带入了干扰浮动的宽屏幕代码中
.thumb{
  width:100%;
  display:block;
  position:relative;
  float:left;
  padding-top:20px;
  clear:both;
}

固定的：
.thumb{
   width:100%;
   display:block;
   position:relative;
   float:left;
   padding-top:20px;

}
欢迎来到堆栈溢出。请在问题中也包括相关HTML，最好是制作一个代码片段或JSFIDLE。可能是框大小：边框框问题。如果没有完整的相关代码，我们无法帮助您，因为Roope SaidFIDLE与发布的代码不匹配。在JSFIDLE链接中添加了完整的代码。文章中包含的css部分可以在like 221上找到。希望我做得对。非常感谢。
.thumb{
   width:100%;
   display:block;
   position:relative;
   float:left;
   padding-top:20px;