2

我有一个包装器 div，其中包含一个右浮动 100% 高度 div 和一个图像。

图像的宽度设置为 %。当您调整浏览器窗口的大小时，图像高度会随着包装 div 的高度而增加和减少。

当我在包装器 div 上设置固定高度时，右侧浮动的 100% 高度 div 会根据我的需要增加高度。但是，包装器 div 具有动态高度，由图像的当前高度和 100% 高度 div 设置，在这种情况下，不会像您期望的那样垂直调整大小。

我正在努力做的事情可以实现吗？

这是一支笔：http ://codepen.io/fraserhart/pen/qiFmb

<div class="wrapper">
  <img src="http://i.imgur.com/7v619Ip.jpg" />
  <div class="grid">
    <section class="row">
      <p>Home</p>   
    </section>

    <section class="row">
      <p>Looking For Care</p>   
    </section>

    <section class="row">
      <p>Working For Us</p> 
    </section>

    <section class="row">
      <p>Professionals</p>  
    </section>

    <section class="row">
      <p>Who We Are</p> 
    </section>

    <section class="row">
      <p>Find a Branch</p>  
    </section>
  </div>
  <div class="clear-fix"></div>
</div>

.wrapper{
  background:blue;
  height:auto;
}
img{
  width:60%;
}
.clear-fix{
  clear:both;
}
.grid {
  display: box;
  width:400px;
  height:100%;
  box-orient: vertical;
  background:#ff0000;
  float:right;
}
.row {
  padding: 20px;
  box-flex:1;
  background: #ccc;
  padding:0px 5px;
  border:1px solid #ff0000;
  text-align:center;
}
4

1 回答 1

2

好吧，这是一种实现方式，有点奇怪，可能不推荐，但它是一种概念证明，一种奇怪的 CSS 好奇心。

这是小提琴：http: //jsfiddle.net/audetwebdesign/3tUfC/

这是HTML：

<div class="wrapper">
    <div class="image-port">
        <img src="http://placekitten.com/800/800">
    </div>
    <div class="content-port">
        <div class="grid">
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>First...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Second...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Third...</p>
            </div>
            <div class="row">
                <img src="http://placekitten.com/100/25">
                <p>Fourth...</p>
            </div>
        </div>
    </div>
</div>

这是CSS：

.wrapper {
    outline: 2px dotted blue;
}

.image-port {
    outline: 1px dotted blue;
    display: table-cell;
    width: 60%;
}
.image-port img {
    width: 100%;
    vertical-align: bottom;
}

.content-port {
    display: table-cell;
    vertical-align: top;
    background-color: wheat;
    height: 100%;
    width: 40%;
}

.content-port .grid {
}

.content-port .row {
    border-top: 2px solid blue;
    position: relative;
    background-color: rgba(255,255,255,0.5);
    overflow: auto;
}
.content-port .row:first-child {
    border-top: none;
}

.content-port .row img {
    width: 100%;
    display: block;
    visibility: hidden;
}
.content-port .row p {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 0 0 0;
    padding: 10px;
}

这个怎么运作

一个.wrapper块包含两个table-cell元素：.image-port和.content-port，相对宽度分别为 60% 和 40%。这避免了网格在小窗口尺寸下跳到图像下方的问题。

在 中.image-port，让img比例缩放到 100% 宽度以获得图像的良好视图。

在.content-port块元素中，为视觉设计设置position: relative、 和可选的overflow以及其他一些属性。

诀窍是：在每个 中.row，放置具有特定纵横比的图像。我创建了四行，所以我的图像是 4:1 的纵横比。将.row img宽度设置为 100% 并设置为visibility: hidden使图像占用灵活空间但不碍事。这将允许每行行在您重新调整窗口大小时改变大小。

接下来，将您的内容放在 中.row，例如，a p。content 元素position: absolute占据了.row父元素的整个宽度和高度（将偏移属性设置为零）。

现在，行的高度与窗口的宽度成比例。这种方法具有一定的灵活性，虽然并不完美，但可能很有用。

请注意，如果您将窗口拉伸得足够宽，则 100x25 图像将是它们的全宽，并且.grid将从包装器的右边缘移开。您可以通过使用更大的占位符图像（例如 1000x250）来实现这一点。

如果您将占位符图像制作为透明的 gif 或 png，那么它应该是轻量级的，并且由于您多次使用相同的图像，浏览器确实应该对它发出一个请求（我认为？）。

这种方法的怪癖是网格扩展的程度取决于图像端口中图像的纵横比。您需要进行一些试验并尝试优化各种参数以获得令人愉悦的布局。

于 2013-04-05T17:16:27.607 回答