相关疑难解决方法(0)

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

参数:

• 所有元素都具有相同的宽度
• 元素的高度无法在服务器端计算(图像加上各种文本量)
• 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作的column-count性质.

该解决方案的问题是元素按列排序:

虽然我需要按行排序元素,至少大约:

我试过的方法不起作用:

• 制作物品display: inline-block:浪费垂直空间.
• 制作物品float: left:lol,没有.

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标？

我想创建一个响应方块的网格布局.

我觉得我应该能够使用CSS网格布局,但无法将每个方块的高度设置为等于宽度.

也难以在每个方格之间设置排水沟.

使用flexbox会更好吗？

目前我的HTML看起来像这样,但是会动态的,所以可以添加更多的正方形.当然,它需要具有响应性,因此最好使用媒体查询将其折叠为一列.

<div class="square-container">

  <div class="square">
    <div class="content">
    </div>
  </div>

  <div class="square">
    <div class="content spread">
    </div>
  </div>

  <div class="square">
    <div class="content column">
    </div>
  </div>

</div>

使用css网格,这是我得到的

.square-container{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    .square {

    }
}

我能够进一步使用flexbox并且能够使用间隔来将正方形与一个漂亮的排水沟对齐,但仍然在努力使高度与每个正方形的宽度相匹配.

我无法找到任何与flexbox或网格相关的示例,但任何示例都将受到赞赏.

谢谢

我一直无法确定为什么flexbox在IE 11中不起作用.

为了测试,我从CodePen中获取了一个非常简单的flexbox布局,并粘贴了以下信息.

Chrome按预期工作; IE11失败了.

在Chrome上运行的布局成功图像:

IE11上布局失败的图像

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

我创建了一个带有#containerdiv 的简单站点,它是两个div的父级:#left并且#right,通过使用Grid Layout:

有没有办法让左栏固定？我希望左侧文本保持其位置,并且正确的文本可以像现在一样滚动.添加position: fixed以#left打破布局.

我知道这个问题已经解决了,但我很欣赏一种方法,使它适用于网格布局.

谢谢.

body {
  margin: 0 0 0 0;
}

#container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.section {
  padding: 5% 5% 5% 5%;
}

#left {
  background-color: aquamarine;
}

#right {
  background-color: beige;
}

<div id="container">
  <div id="left" class="section">
    <p>This should not scroll</p>
  </div>
  <div id="right" class="section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec …

单击我的按钮生成内容后，我尝试在我的 flex-container 上使用以下内容，但是当我调整窗口大小时，它会不断调整我的项目大小。我希望它们具有固定的宽度和高度（理想情况下，每个项目都是 100x100 像素的正方形）

flex-shrink: 0;
flex-grow: 0;

flex-shrink: 0;
flex-grow: 0;

const sampleContent = ["stuff1", "stuff2", "stuff3", "stuff4", "stuff5"]
const button = document.querySelector(".content");
const rootElement = document.querySelector("#root");
const widthDiv = document.querySelector("#width-value");
const resultContainer = document.querySelector("#root");
const widthValue = window.getComputedStyle(resultContainer, null).getPropertyValue("width");
button.addEventListener("click", () => {
	sampleContent.forEach((content) => {
  const newDiv = document.createElement("div");
  console.log(newDiv);
  newDiv.textContent = content;
  newDiv.classList.add("result");
  rootElement.appendChild(newDiv);
  })
})
widthDiv.textContent = widthValue;

.result-container {
  display: flex;
  width: 60%;
  height: 200px;
  border: 1px black solid;
  flex-wrap: nowrap;
}
.container …