Question

我想使用以下背景颜色实现以下布局：

第一行（红色）：图像旁边的“文本1”，向右浮动“文本2”
第二行（绿色）：“文本3”向左浮动[屏幕的70％]，“文本4”向右浮动[屏幕的30％]

这是我尝试执行的代码：

<html>
<head>
    <title>VVNET</title>
    <style type="text/css">
    </style>
</head>
<body>
    <div style="background: red;">
        <img style="width: 55px; height: 55px; display: inline-block; float: left; " src="logo.png">
        <div style="display: inline-block; float: left;">
            text 1
        </div>
        <div style="display: inline-block; float: right; ">
            text 2
        </div>
    </div>
    <div style="background: green;">
        <div style="display: inline-block; float: left; width: 68%">
            text 3
        </div>
        <div style="display: inline-block; float: left; width: 28%">
            text 4
        </div>
    </div>
</body>
</html>

首先，由于某些原因，两行（div）的高度均为0，因此它们没有颜色。其次，以某种方式将所有行交织在一起，并且“文本3”在“文本1”旁边浮动
这是我的输出：

DIV元素变得不可见

0 个答案: