问题 没有浮动元素的双列布局？


如何在不使用浮动的情况下并排放置div？我问，因为我读过几次我不应该使用浮点数。或者在这种特殊情况下浮动仍然是定位元素的最佳方式？


3707
2018-02-20 15:12


起源
出于一般布局的目的，浮点数是创建列的最简单，最安全的选项。对于数据网格和HTML电子邮件，表格是创建列的适当方式。除此之外，这取决于您在每种情况下的具体需求。 - Matt Coughlin

答案:

http://jsfiddle.net/9LaJt/

你应该看看：

display: inline-block

正如马克所说，为了避免基线对齐： 

vertical-align: top

16
2018-02-20 20:27


真棒！但看看当我添加一些内容时会发生什么 jsfiddle.net/xvcDT - devotchkah
内联元素始终位于行的底部。您可以手动设置高度。 - Raffael
内联元素 默认 基线垂直定位。你可以设置vertical-align：top; jsfiddle.net/rFwtv/3 - Mark

你有几个选择......

  • 绝对定位COL1宽度：50％左：0％COL2宽度：50％左：50％
  • 固定定位“与上述相同但会干扰滚动”
  • 表布局，即使纯粹主义者会抗议，它也能正常工作

0
2018-02-20 15:18


第一个选项似乎有效，但现在我面临另一个问题。这两个div在一个包装div中，具有固定的宽度和填充。绝对定位会杀死填充物 - devotchkah
@devotchkah - 您可以向与外包装填充匹配的绝对div添加margin-left和margin-right。 - Louis Ricci
是的，我相信这会工作，但我添加填充到包装器只是所以我不必添加边距或填充到任何其他div，你知道吗？ - devotchkah

热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来