文章/答案/技术大牛

发布

社区首页 >问答首页 >内联块和浮动的布局:左元素

问内联块和浮动的布局:左元素
EN

Stack Overflow用户

提问于 2017-07-02 18:36:45

回答 2查看 31关注 0票数 0

我一直在寻找一个具体问题的答案。我有一些重复的元素(使用angularjs，但这与此无关)。当第二个元素很高时，第三个元素被包装到第二行，在第一列的第一元素和第三元素之间留下空白。我想避免这件事。

其结构与此类似：

<div class="windows"> 
    <div>short content</div> 
    <div>tall content<br />more content</div> 
    <div>any size</div> 
</div>

css3：

windows { display: block }
windows > div { 
    display: inline-block;
    float: left;
}

我的问题是，我的观点只有两条宽，所以第三条被推得太低了。

观察到的产出：

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
#                ***************#
#***************                #
#*Any Size     *                #
#***************                #
#################################

所需产出：

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
#*************** ***************#
#*Any Size     *                #
#***************                #
#################################

有没有任何不涉及2列div布局的简单解决方案？由于这些是动态加载的，每个选项卡类别中有3-5个，所以我只需要在一个div中加载它们。由于角度的原因，它们在一个阵列中。两个div列意味着两个数组。我正在寻找一个简单的CSS解决方案。我试过“垂直对齐:顶”，但没有成功。

@farid:我不能使用固定的height...This被刻度成所有的设备大小。字包装可以使高度不可预测，我不想要图形的小故障。声明的问题比单词要好得多，而不是从它们所在的GUI元素中删除。除非你的意思是让他们都更高.我不想浪费屏幕空间:在大屏幕上会有太多的填充。

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-02 19:03:19

* {
  /* include paddding and borders in width */
  box-sizing: border-box;
}

.windows {
    border: solid 5px red;
}

.windows > div {
    border: solid 5px green;
    float: left;
    width: 50%; /* use media queries at some size might set it to 33.333% */
}

.windows > div:nth-child(2) {
    border: solid 5px orange;
    float: right; /* this one needs to be float right */
}

.windows:after {
    content: '';
    display: block;
    clear: both; /* when using floats always clear them */
}

<div class="windows"> 
    <div>short content, <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> 
    <div>tall content<br />more content<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
    <div>any size<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
</div>

票数 1

Stack Overflow用户

发布于 2017-07-02 19:08:22

将float左侧属性赋予.windows类

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44874013

复制

相似问题

问内联块和浮动的布局:左元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联块和浮动的布局:左元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问内联块和浮动的布局:左元素
EN