Question

我是网络编码新手，我需要一些CSS帮助。但是，网页没有像我计划的那样结果

我试图将带有链接的红色部分显示在图像下方的左上角。红色背景似乎遍布整个页面而不仅仅是列。我想张贴图片，但我还没有10个名声，所以我不能：（

以下是我一直使用的HTML代码：

    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"
<html>
    <head>
        <title>Poll Analysis</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
</head>
    <body>
        <div class= "main">
            <div class = "row1">
                <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
            </div>
        </div>
            <div class = "row2">
                <div class = "row2col1">
                    <u> Links </u>
                    </br>
                    <a href="http://google.co.uk/">Google</a>                   
                </div>
                <div class = "row2col2">
                </div>
            </div>
    </body>
</html>

这是CSS：

div.main{
width:50%;
margin:auto;
background:white;
}

div.row2col1{
float:left;
margin:0;
}

div.row2col2{
margin-left:25%
background-color:white;
border:15px solid #FF0000;
}

提前感谢大家的帮助：

马克特纳

Answer 1

用户@anpsmn为我解决了这个问题。他说＆＃34;在;

之后你错过了margin-left:25%

我现在感觉很蠢，感谢大家帮助我。

我发誓，我检查了一下。

马克特纳

Answer 2

这是你想要的吗？

HTML：

<body>
<div class="main">
    <div class="row1">
        <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
    </div>
</div>
<div class="row2">
    <div class="row2col1"> <u> Links </u>

        </br> <a href="http://google.co.uk/">Google</a> 
    </div>
    <div class="row2col2"></div>
</div>

CSS：

div.main {
    width:50%;
    margin:auto;
    background:white;
}
div.row2col1 {
    float:left;
    margin:0;
}
div.row2col2 {
    background-color: #fff;
    border:15px solid #FF0000;
}

＆＃13;

* {
  margin: 0;
  padding: 0;
}
div.main {
    width:50%;
    margin:auto;
    background:white;
}
div.row2col1 {
    float:left;
    margin:0;
}
div.row2col2 {
    background-color:white;
    border:15px solid #FF0000;
}

＆＃13;

<body>
    <div class="main">
        <div class="row1">
            <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
        </div>
    </div>
    <div class="row2">
        <div class="row2col1"> <u> Links </u>

            </br> <a href="http://google.co.uk/">Google</a> 
        </div>
        <div class="row2col2"></div>
    </div>
</body>

＆＃13;

Answer 3

基本上每个浏览器都有每个标签的默认边距和填充大小。所以我们需要先清除。为此，我们使用* opreater为所有标签设置一个值，所以在这里我将值重置为0。

*{
padding:0px;
margin:0px;
}

在您的html页面中应用此css。红线从左下角开始。如果你想要红色条，首先交换html第一次

网站中的CSS帮助

3 个答案: