小编kuk*_*kuz的帖子

我认为这个问题很常见,并且在SO本身就已经找到了,但是找不到如何解决这个问题.

问题:

当您调整窗口大小时,您会注意到两个图像的高度有时会相差1px(当浏览器调整尺寸时,这是预期的).

如何"修复"此UI问题？我知道我可以通过使用一个flexbox.但我想有更好的解决方案.你们可以跳进去吗？

table{
  width:100%;
  border-collapse: collapse;
}
img{
  display: block;
  width: 100%;
}

<table>
  <tr>
    <td><img src="http://placehold.it/100x100"/></td>
    <td><img src="http://placehold.it/100x100"/></td>
  </tr>
</table>

我甚至在这里使用display: table:

.wrapper{
  width:100%;
  display: table;
}
.wrapper div{
  display: table-cell;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper">
    <div><img src="http://placehold.it/100x100"/></div>
    <div><img src="http://placehold.it/100x100"/></div>
</div>

编辑:Firefox浏览器中没有问题,但Chrome中存在问题.

请注意,当我使用时,问题不存在flexbox:

body{
  margin: 0;  
}
.wrapper{
  width:100%;
  display: flex;
}
.wrapper div{
  flex: 1;  
}
img{
  display: block;
  width: 100%;
}

<div class="wrapper"> …

在 flexbox 中，当我使用justify-content:space-between第一个和最后一个项目时，它们与 flex 容器的边界完全对齐，其中空间在它们之间划分。如何将第一个项目向右对齐，而其他项目也向右对齐（而不是整个宽度）？

下面的示例代码不好，因为当我使用时flex-end，我必须为项目设置边距，因此每行中的第一个不粘在右边。

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  background:#ff8800;
}


.flexitem{
	display: -webkit-flex;
	display: flex;
	margin:20px;
	width:24%;
	background:#666666;
	box-sizing:border-box;
    height:50px;

}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

这也不好，因为项目没有右对齐（而是整个宽度）：

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background:#ff8800;

}


.flexitem{
	display: -webkit-flex;
	display: flex; …

鉴于以下HTML:

<div>
  lorem ipsum...
  <img style="float:left;margin-top:-100px" />
</div>

我希望得到这样的东西:

但实际上我最终获得的是:

.Block {
  width: 300px;
  margin: auto;
}

.Image {
  width: 150px;
  float: left;
  margin-top: -100px;
}

<div class="Block">
  Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
  <br><br>
  Nullam id dolor id nibh ultricies …

我有一个.parentdiv,其中有一个未知数量的.childdiv.我需要将子div放在一个垂直网格中,所有这些都必须是相等的高度.不幸的是,我不能使用javascript.

我曾尝试不同的组合display: inline-block和float: left,但我不能让孩子到相同的高度.

我可以使用相同的高度,display: table-cell但后来我遇到另一个问题,如果总宽度超过容器宽度,孩子们不会分成多行.

有没有办法用纯css做到这一点？我只需要支持IE10 +如果有帮助(flexbox？)

我目前在容器中有元素,每个元素都包含一个图像.我想使用flexbox将它们分配到四个角或容器中.图像水平分布正确,但不会垂直占用所有可用空间.

这就是目前的样子:

这是我的标记:

<div class="container">
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
    <div class="photo">
        <img src="https://placehold.it/180">
    </div>
</div>

而我的(S)CSS:

div.container {
    width: 405px;
    height: 405px;
    background: rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    div.photo {
        width: 180px;
        height: 180px;
        overflow: hidden;
        border-radius: 5px;

        img {
            height: 100%;
        }                   
    }
}

我有一个jQuery代码,我试图在现有div附加一个包含URL的标签标签.以下是代码:

var strURL = 'http://financials.morningstar.com/ratios/r.htmlt=tup&region=usa&culture=en-US';
var str = '<li>';
str += '<label style="font-family:Arial;">' + strURL + '</label>';
str += '</li>';
$('#existingDiv').append(str);

实际显示页面时,它将URL显示为:

http://financials.morningstar.com/ratios/r.html?t=tup®ion= usa&culture = en-US

当value属性> 23时,我需要隐藏所有选项

<select id="category_ids" class="cat-search-pb" multiple >
    <option value="20">Condo for Sale</option>
    <option value="24">&nbsp;&nbsp;- Jomtien</option>
    <option value="25">&nbsp;&nbsp;- Bang Saray</option>
    <option value="21">Condo for Rent</option>
    <option value="22">House for Sale</option>
    <option value="23">House for Rent</option>
    <option value="14">Land</option>
    <option value="15">Commercial</option>
    <option value="18">New Condo Projects</option>
    <option value="19">New House Projects</option> 
</select>

但是这段代码不起作用:

$(document).ready(function () {
   $(".cat-search-pb option[value>23]").closest('option').hide();
});

谢谢你的想法!

我正在尝试创建由正方形组成的网格/布局.每行四个方格.正方形不能在屏幕大小调整上扭曲.宽度和高度必须始终相同(我不想要固定值).我必须使用CSS网格.谁能帮我 ？

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

我正在尝试构建一个包含卡片状物品的网格.每种类型的单元格(标题,图像,文本,按钮,......)每行应具有相同的高度,由最大单元格的内容决定,如下面的代码段所示.

现在我试图限制列的数量,并让卡片换行,就好像我flex-wrap: wrap;在基于flexbox的解决方案中使用的那样.列数应通过媒体查询确定.如果不使用尚未支持的子网格,这可能吗？

另外,使用子网格的解决方案如何？我想它会降级到当前浏览器中高度不等的单元格？

.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

<div class="grid">

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">text
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 2 is longer and may span multiple lines</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
  </p>
  <button …

在 CSS 网格中使用 grid-template-areas 时，我想要一个跨越整个宽度的标题。是的，我可以使用 repeat( 12, 1fr) 定义模板网格列，但我正在寻找一种使用它的方法，而不必将列的名称写入 12 次。见下文。

grid-template-areas: 
            "article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero article-hero"
            "header header header header header header header header header header header header"
            "main main main main main main main main main aside aside aside"
            "footer footer footer footer footer footer footer footer footer footer footer footer";

第一行有 'article-hero 写了 12 次，有没有办法使用重复，这样我就可以做repeat(12,article-hero)而不是写 12 次？