小编VXp*_*VXp的帖子

Flexbox，使所有图像等宽以适合列表

使用 WordPress 和高级自定义字段，用户最多可以在块中添加或删除 10 个图像。图像内嵌且必须保持在一行上。

用户提供了各种宽度和高度的图像，我不能依靠它们来仔细编辑它们。这些是客户标志。

我的目标是列表中的所有图像都会自动调整大小，以便它们都适合容器但保持纵横比。

有什么帮助吗？

目前的标记和 CSS：

.logo-list {
  background-color: white;
  padding: 20px;
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

Run Code Online (Sandbox Code Playgroud)

<div class="logo-list">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
</div>

Run Code Online (Sandbox Code Playgroud)

JSFiddle

html css flexbox

Lov*_*ock

2019 01-12

-1
推荐指数

1
解决办法

2379
查看次数

将输入排列成相等的长度

我有多行输入

<input type="text" style="width: 50px;">
<br>
<input type="text" style="width: 25px;">
<input type="text" style="width: 25px;">

Run Code Online (Sandbox Code Playgroud)

不幸的是,25+25 != 50因为它们之间存在空间,每个浏览器都有所不同.

问题:如何设置输入的样式2x25具有相同的长度1x50

html css input

Dr.*_*ail

2018 03-09

-2
推荐指数

1
解决办法

87
查看次数

Zebra Stripe使用CSS

我试图实现以下条纹模式,但没有一个n-child组合正在解决.任何建议/解决方案来实现这一目标.

css css-selectors css3

Aye*_*Jae

2018 12-19

-3
推荐指数

1
解决办法

235
查看次数

如何使用CSS仅选择前三个元素

我怎么可以只选择前三个要素与:nth-child() 选择？

section > figure:nth-child( ? ) {
  /* ... */
}

Run Code Online (Sandbox Code Playgroud)

<section>
  <figure>1</figure> <!-- select this -->
  <figure>2</figure> <!-- and this -->
  <figure>3</figure> <!-- and this -->
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
</section>

Run Code Online (Sandbox Code Playgroud)

html css css-selectors css3

Bar*_*wan

2018 11-14

-3
推荐指数

1
解决办法

143
查看次数