相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我想知道如何创建一个响应方块的布局.每个正方形都有垂直和水平对齐的内容.具体示例如下所示......

我有一个关于flexbox布局的主要问题.我建立了一个装有图像的盒子的容器,我决定使用flexbox布局来证明内容的合理性,使它看起来像一个网格

她的代码是:

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

和CSS:

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

除了最后一行/行之外,一切看起来都很好 - 当它不包含与其他行相同数量的元素时,中心元素和它会破坏我的网格效果.

http://jsfiddle.net/puz219/7Hq2E/

如何将最后一行/行对齐到左侧？

我有X个图像(所有相同的高度和宽度),我想在网页上显示它们.但我想让页面在调整浏览器大小时自动显示一行中的最大图像数量(不调整图像大小),并将图像显示为固定距离.

此外,图像应在页面中央组合在一起,并一个接一个地显示.

例如,当浏览器窗口宽度足以在一行上显示3个图像时,它们应显示如下.

每行3个图像以固定的距离分组在一起,在页面的中心,一个接一个.

如果浏览器变得更宽,那么可以在一行上显示4个图像,它们应该像这样显示.

每行4个图像(不调整图像大小),在页面中心一个接一个地分开固定距离.

到目前为止,我已经编写了以下代码:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

因此,图像以div(inner-div)内部的10px填充内联显示,然后在outer-div内居中.并且图像在内部div内部与文本对齐.

但问题是它们显示如下:

当浏览器变宽时,如下所示

有人可以告诉我如何显示像第一组图像的图像？

即每行的最大图像数(不调整图像大小),一个接一个地在页面中心组合在一起,固定距离(包裹).

嘿我正在尝试为画廊创建一个响应式的盒子布局,看起来像这样http://webdesignerwall.com/demo/responsive-column-grid/

该示例的问题在于宽度是硬编码的,并且媒体查询是必需的.我有很多专栏可以解决这个问题.

我可以使用Flex girds获得相同的结果,但是最后一列比其他列大,如本CodePen所示:

http://codepen.io/anon/pen/zClcx

HTML

<div class="flex-container same-width same-height">
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>g</div>
  </div>
  <div class="flex-item">
    <div>why am I longer than my friends?</div>
  </div>
</div>

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    max-width: 950px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: grey;

  & > * {
    min-width: 300px;
    background: green;
    max-width: 404px;
    flex: 1 1 auto;
  }
  .flex-item > div {
    background: red;
  }
}

问题: 如何使最后一列与其他列的大小相同？

我想水平居中几个内联块,但同时让它们在最后一行左对齐(见下文).

问题是我实现了这样的事情(http://jsfiddle.net/5JSAG/):

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|            _____            |
|           |     |           |
|           |  3  |           |
|           |_____|           |

虽然我想要这样的东西:

|        _____   _____        |
|       |     | |     |       |
|       |  1  | |  2  |       |
|       |_____| |_____|       |
|        _____                |
|       |     |               |
|       |  3  |               |
|       |_____|               |

您可以在 …

我有一个瓷砖(或div)的容器,我希望容器居中,而瓷砖在容器中左对齐.

所以如果窗口很小:

..[s][s][s]..
..[s][s].....

如果窗口稍微加宽:

...[s][s][s]...
...[s][s]......

进一步:

.[s][s][s][s].
.[s]..........

我试过了:

#container's-parent: { display: block; text-align: center; }
#parent: { display: inline-block; text-align: left; }
.tiles: { display: inline-block }

但这似乎不起作用.

我希望至少在Chrome中使用它,但我还需要最终支持最新的FF,Safari和IE 10+

我有这个笨蛋 这个笨蛋。

我试图水平对齐弹性容器，同时保持它们的项目与开头对齐。 我正在尝试align-content: flex-start在使用justify-content: center.

现在，如果最后一行的项目较少，它将以弹性容器为中心，而不是行的开头。

更新1

这是预期的结果：

我想让 UL （黄色）水平包裹 LI 列表元素（紫色），而 UL 上没有任何固定宽度。已为本示例添加了包装。

超文本标记语言

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

CSS

.wrap {
  background: green;
  width: 500px;
  padding: 10px 20px;
}

li {
  display: inline-block;
  width: 70px;
  height: 50px;
  background: purple;
  list-style: none;
}

ul {
  background: yellow;
  margin: 0; padding: 0;
}

现在

期望的

CodePen在这里： http: //codepen.io/ptimson/pen/IrCHB