2

I am somewhat new to CSS and I have a problem that I can't seem to solve. I would like to have a series of divs on my page (stacked one on top of the other) and each of them should contain some text, and one or more images.

In particular, I would like the text to be left aligned, and vertically aligned in the middle, and the images should be right aligned, and the height of the div should be based upon the height of the images (which can be variable).

Basically each of the divs should look like so: enter image description here

So far I have been able to get one or more of the requirements listed above, but never all of them at the same time. Is this actually possible with pure CSS, or should I just quit wasting my time and use a table?

4

2 回答 2

2

嗨，我有一个解决方案，请查看此链接http://jsfiddle.net/8mQc4/15/。

它基于使用一些属性，例如：

float and vertical-align.

此代码允许灵活的 img 高度和宽度，以及他的容器垂直中心 de text.Just 尝试更大的文本或图像。

于 2013-10-18T21:48:02.813 回答
0

哦，伙计，我为您提供了一个有趣的解决方案，它可能有效，但仍然是一个可靠的想法！

如果将图像设置为背景，则可以避免浮动或定位。

.section {
   background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
   background-position: center right;
   background-size: contain;
   width: 100%;
}

我可能发现的唯一问题是图像大小基于 div 内部的内容。

JSFIDDLE

这将允许图像具有固定大小，但是！它确实遇到了依赖文本来确定图像大小的问题。：/

background-size: 80px 60px;

固定尺寸

使用min-height: whatever;You 仍然可以达到预期的效果，但不是 100% 最好。

最小高度

于 2013-10-18T21:25:59.730 回答