无表格的CSS问题

Question

一般来说，我知道如何使用css而不是高级css 所以我需要一些帮助才能开始。不幸的是，我没有找到任何好的和体面的指导没有CSS的表，我想做的部分是非常棘手的。所以这就是我想要的以及到目前为止我所做的。

高度不是固定的，所以我希望它灵活，因为主要文字可能很长或很小

这是我到目前为止所做的事情

http://jsfiddle.net/VmnDj/1/

这似乎不能正常工作，因为最小高度是主文本的位置，它从不包括整个图片。图片的某些部分是在容器外面。请你能为此做出贡献并解释我为什么要采取每一步？我的目的是从中学习，而不仅仅是解决方案。如果您需要更多信息，请告诉我。 非常感谢您提前

Answer 1

试试这个：

JSFIDDLE：http://jsfiddle.net/86FMw/

请注意，没有固定的高度，当主文本较长时，框会增长。

HTML

<div class="cartitem">
    <div class="left">
        <img src="http://images.pictureshunt.com/pics/p/pear-5428.jpg" width="60" height="60" alt=""/>
    </div>
    <div class="toptext">
        top text top text top text
    </div>
    <p>
        text text text text<br/>
        text text text text  text text text text text text text text <br/>
        text text text text text text text text <br/>  
    </p>
    <div class="buttonbar">
        <button>click me</button>
    </div>
</div>

CSS

.cartitem {
    position: relative;
    padding-left: 80px;
    border: 1px solid #333;
}

.left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
}

.toptext {
    background: silver;
}

.buttonbar {
    text-align: right;
}

Answer 2

这种布局看起来像以前在框架中使用。

尝试右上方的DIV： 将Text2的代码设置为如下所示：

p.tab {
  margin-top: -2em;
  margin-left: /* spacer_distance in em/px */;
}

我制作了3列文字来模仿我的某些页面上的表格，因为首先显示的文字不是很宽。

请记住，我们现在处理的是移动设备用户。所以只有那个DIV中的2列才能工作。但是，要谨慎地在整个视口中传播更多文本，而不要将min-width语句用于整个视口。