假设我想要这样的布局:

+---+---+
| A | B |
+---+---+
| C | D |
+---+---+

在上面的例子中,我希望A和C的宽度相同,而BD保持原样。

我也想要的高度AB一直锁在一起,我想C保持彼此不变。

如果我使用CSS布局来尝试类似的东西,我可能会得到这样的结果:

+-------+---+
|   A   | B |
+---*---*---+
| C |   D   |
+---+-------+

我想要的只是一种使HTML元素与其他HTML元素对齐的方法,而不必使用表!

或有或无或有或无提问于
嗝屁软件工程回答于

我认为使用纯css,没有Width,而且不使用table你可以用柔性布局

代码

HTML

<section class="flexrow">
    <div class='item'>1asdf</div>
    <div class='item'>2</div>
</section>
<section class="flexrow">
    <div class='item'>1</div>
    <div class='item'>2</div>
</section>

CSS

.flexrow {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    margin-bottom: 10px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-flex: none;
    -moz-flex: none;
    -ms-flex: none;
    -o-flex: none;
}
.item {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    margin: auto 10px;
    border-radius: 5px;
    border:1px solid black;
}

这是JsFiddle

回答过的其他问题

为什么我的web服务器搭建好之后网站的aspx文件打开显示404呢?

嗝屁软件工程
第一步,检查IIS服务扩展 控制面板->管理工具 ->服务和应用程序 ->Internet 信息服务(IIS)管理器 ->Web服务扩展 -> Active Server Pages -> 允许 -> Internet数据连接器 -> 允许。 注:ASP的程序版本要与ASP服务扩...... 展开详请

关于 云对象存储v4 费用计算?

嗝屁软件工程
COS 标准存储采用后付费方式,根据实际使用量收费。其中存储空间、请求数、数据取回三类计费项采用月结方式。每月 3 日到 5 日为账单结算日,对上月产生费用进行结算,输出账单。流量采用日结方式,每日对上一日产生费用进行结算,输出账单。 费用说明 COS 在中国大陆目前支持的地域有...... 展开详请

如何看待家用智能机器人的飞速发展?

嗝屁软件工程
智能机器人的飞速发展离不开人工智能的各种技术的飞速发展啊,比如通过语音与用户交互,通过语音控制来播放音乐、视频,实现远程家居监控等等。 而Zenbo最重要的语音交互,是用腾讯云小微来实现的。 [图片] 它有一下几个主要功能: 1,人脸识别:在LFW无限制条件下人脸验证测试中,...... 展开详请

文智关键词提取API报错501,短文能用,长文不行?

嗝屁软件工程

调用一次接口content/text的最大长度限制为65535字节。

32767个汉字,看看是不是超了?或者看下py45行

如何看待春运票务系统的架构优化?

嗝屁软件工程
已采纳
感觉题主上面说的太简单了些。 如上所说一般的电商网站,购买都是基于商品的概念,每个商品有一定量的库存,用户的购买行为是针对商品的。当用户发起购买行为时,系统只需要生成订单并对用户要购买的商品减库存即可。但是,12306就不是那么简单了,具体复杂在哪里,且听我慢慢分析: 如今的...... 展开详请

云通讯发送小视频sendMessage接口回调code:116001怎么解决?

嗝屁软件工程
no permission 是指没有权限访问某项资源 IM发送的小视频实际上是存储到点播中的,检查一下你点播套餐有没有开通咯; 如果开通了,检查是否开通了防盗链,你app做的请求是否符合防盗链要求;... 展开详请

关于作者

所属标签

扫码关注云+社区