Question

我正在尝试以HTML格式加载GTA在线提示屏幕。

这就是我要做的 - http://prntscr.com/6n7txe 这就是我所拥有的 - http://prntscr.com/6n7w92

我现在关注的问题是以正确的宽度和高度将2次潜水右下角。

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>GTA ONLINE</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>

<div class="column">
    <div class="text">
        <p class="top">GTA Online</p>
        <p class="middle">First Person Mode</p>
        <p class="bottom">Lorem ipsum dolor sit amet, consectetu adipiscing elit. Maecenas sodales, velit sed dictum fermentum, ligula nunc  sodales magna, at convallis. </p>
    </div>
    <div class="picture">
        <img src="pics/Trevor.jpg"
    </div>
</div>

<script src="script.js"></script>
</body>
</html>

CSS：

body{
    background-image: url("../pics/background_1.jpg");
    background-size: cover;
}

.column {
    white-space: nowrap;
}

.column .picture img {
    width: 25%;
    height: 25%;
    vertical-align: middle;
    float: right;
}

.column .text {
    background:rgba(0,0,0,1);
    display: inline-block;
    vertical-align: top;
    float: left;
    width:50%;
}

.column .text p{
    color:rgba(255,255,255,1);
    width:50%;
}

Answer 1

省略浮动：向右和浮动：向左，但在两个div中添加 display：inline-block 。

    body{
        background-image: url("../pics/background_1.jpg");
        background-size: cover;
    }

    .column {
        white-space: nowrap;
    }

    .column .picture img {
        width: 25%;
        height: 25%;
        vertical-align: middle;
        vertical-align: middle;
        float: right;

    }

   /* new style start*/
    .column .picture {
    display:inline-block;
    }
   /* also set width to this div 
      otherwise it takes 100% and won't 
      stay inline with other elements.
      new style end */ 

    .column .text {
        background:rgba(0,0,0,1);
        display: inline-block;
        vertical-align: top;
        width:50%;
    }

    .column .text p{
        color:rgba(255,255,255,1);
        width:50%;
    }

Answer 2

.column{float:left;width:100%;}
.text{float:left;width:48%;margin-right:2%;}
.picture{float:left;width:50%;}

Answer 3

首先，您的HTML中有一些未关闭的元素 - <div>中的第一个body没有匹配的结束补充</div>，而img与Trevor缺少结束括号 > 。（它也缺少必需的属性alt，所以理想情况下，它应该看起来像<img src="pics/Trevor.jpg" alt="Trevor" />。

现在到了这一点。这很简单，两个div都需要浮动到left，所以在.column .picture img中，只需用float: right;替换float:left即可它

Answer 4

body{
    background-image: url("../pics/background_1.jpg");
    background-size: cover;
}

.column {
width:100%;/* you can give 1000px also */
    white-space: nowrap;
}

.column .picture img {
    width: 50%;
    height:auto;
    vertical-align: middle;
    float: left;
}

.column .text {
    background:rgba(0,0,0,1);
    display: inline-block;
    vertical-align: top;
    float: left;
    width:50%;
}

.column .text p{
    color:rgba(255,255,255,1);
    width:100%;
}

如何将图像div放在文本div旁边？

4 个答案: