说明：

Question

我正在尝试构建一个由图像块组成的水平滚动布局：

<div class="container">
  <div class="item">
     <img src="http://placehold.it/200x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/400x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/300x300">
 </div>
</div>

我使用display:inline-block和white-space: nowrap;属性来实现这一点，它确实有效，但浏览器似乎不会在调整大小时重新计算块宽度？

点击此处：https://jsfiddle.net/g597w3Lr/2/并尝试调整浏览器的大小..

这是一个屏幕抓取，以更好地了解我的问题： https://youtu.be/VxKo4gysc1o

首先，所有图像都定位良好，我可以水平滚动：完美。
然后我调整浏览器的大小
图片正在调整大小，而不是.item包装器。出现白色差距:(

基本上我期待与垂直滚动相同的功能，即根据内容大小调整宽度。我实际上甚至不理解这里的逻辑......

有没有办法克服这个？

谢谢！

Answer 1

检查它是否是你想要的？

我使用border管理你的类：solid 1px red; 并使用宽度：在某些类中为100％。

也在课程项目中：

width:100%;

https://jsfiddle.net/g597w3Lr/6/

Answer 2

Original answer

编辑2：观看您的视频我认为新方法正是您所寻找的。

您必须将divs .item课程显示为inline并删除white-space: normal媒体资源。

.item {
  display: inline;
  height:100%;
}

Updated JSFiddle

说明：

我不是CSS的专家，所以如果有人看到某些错误，请纠正我。

当您将inline-block显示为inline-block时显示的元素：

内联块


使元素生成内联级块容器。 内联块的内部格式为块框，元素本身的格式为原子内联级框。

表示您显示为display: block的元素就像一个块，但您可以将其设置为内联（在同一行中）。这意味着您可以在一行中设置div（默认为inline）。您还可以看到它official documentation：

div元素，即除法的缩写，是块级通用容器。

此外，height/width元素无法获得divs属性，因此当您将.item inline类显示为height/width时，这就是为什么内容但没有获得他们应该对应的%（在你的情况下，从他们的父母那里得到inline-block）。

如果您将其显示为height/width，则不会更改有关其默认inline属性的任何内容。只允许您将它们显示在一行中。

here查看三个div（默认为inline-block / block / DECLARE @DB_USers TABLE ( DBName SYSNAME ,UserName SYSNAME ,LoginType SYSNAME ,AssociatedRole VARCHAR(max) ,create_date DATETIME ,modify_date DATETIME ) INSERT @DB_USers EXEC sp_MSforeachdb ' use [?] SELECT ''?'' AS DB_Name, case prin.name when ''dbo'' then prin.name + '' (''+ (select SUSER_SNAME(owner_sid) from master.sys.databases where name =''?'') + '')'' else prin.name end AS UserName, prin.type_desc AS LoginType, isnull(USER_NAME(mem.role_principal_id),'''') AS AssociatedRole ,create_date,modify_date FROM sys.database_principals prin LEFT OUTER JOIN sys.database_role_members mem ON prin.principal_id=mem.member_principal_id WHERE prin.sid IS NOT NULL and prin.sid NOT IN (0x00) and prin.is_fixed_role <> 1 AND prin.name NOT LIKE ''##%''' SELECT dbname ,username ,logintype ,create_date ,modify_date ,STUFF(( SELECT ',' + CONVERT(VARCHAR(500), associatedrole) FROM @DB_USers user2 WHERE user1.DBName = user2.DBName AND user1.UserName = user2.UserName FOR XML PATH('') ), 1, 1, '') AS Permissions_user FROM @DB_USers user1 GROUP BY dbname ,username ,logintype ,create_date ,modify_date ORDER BY DBName ,username）。

Answer 3

你必须略微修改你的css

<强> HTML

<div class="container">
  <div class="item">
     <img src="http://placehold.it/200x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/400x300">
 </div>
   <div class="item">
     <img src="http://placehold.it/300x300">
 </div>
</div>

<强> CSS

html,body {
  height:auto;
}

.container {
  display: inline-block;
  white-space: nowrap;
  height:auto;
}

.item {
  display: inline-block;
  white-space: normal;
}

.item img {
  width:100%;
  height:100%;
}

Fiddle

使用css

3 个答案:

说明：