css与图像和文本对齐

Question

我有这样的事情：

<li>
                <div class="">
                    <a href="http://www.youtube.com/watch?v=1111"   target="_blank">
                        <img src="http://img.youtube.com/vi/1111/default.jpg" />
                    </a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
                        <h6>abcd</h6>
                    </a>
                    <p>
                        1234 views
                    </p>
                </div>
</li>
//multiple li like above inside ul

我正试图在youtube上的相关视频中实现效果，左侧是图像，图像右侧出现的文字（不在图像下方流动） - 怎么办呢？ 例如：

感谢

Answer 1

浮动和边距可以成为你的朋友。例如：

<style type="text/css">
.videoitem {
    height:90px;
    margin-bottom:15px; 
}
.image {
    float:left;
    margin-right:10px;
}
</style>

            <div class="videoitem">
                <a href="http://www.youtube.com/watch?v=1111"   target="_blank">
                    <img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
                </a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
                    <h6>abcd</h6>
                </a>
                <p>
                    1234 views
                </p>
            </div>
            <div class="videoitem">
                <a href="http://www.youtube.com/watch?v=1111"   target="_blank">
                    <img class="image" src="http://img.youtube.com/vi/1111/default.jpg" />
                </a><a href="http://www.youtube.com/watch?v=1111" target="_blank">
                    <h6>abcd</h6>
                </a>
                <p>
                    1234 views
                </p>
            </div>