Question

我想在同一条线上设置3件事。其中一个是pic，另外两个将是文本字段。这就是我到目前为止所拥有的。我在这三个地方都有一个img，只是为了拥有一个占位符。

<div class="top"><img src="Images/cmdg.jpg" ></img></div>
<div class="top1"><img src="Images/cmdg.jpg" ></img></div>
<div class="top2"><img src="Images/cmdg.jpg" ></img></div>

<style>
img{
width: 580px;
height:auto;
margin-left:580px;
margin-right: 574px;
margin-top: -18px;
border-color:white;
border-style:solid;
border-radius:50%;
border-width: 2px;
}

.top {
    float:left;
    margin: 33%;
    width:180;
    height:auto;
}
.top1 {
    float:none;
    margin: 33%;
    width:180;
    height:auto;
}
.top2 {
    float:right;
    margin: 33%;
    width:180;
    height:auto;
}

此时它会将它们叠加在一起，或者看起来不正确。请帮忙

Answer 1

您必须根据窗口的宽度给出边距。当我删除/减少边距时，它可以完美地工作。 请尝试下面的代码并理解它。

<html>
<head>
<style type="text/css">
img{
    width: 400px;
    height:auto;
    //reduce the margins below as the screen size is 1300 something hence decide accordingly.
    /*margin-left:580px;
    margin-right: 574px;*/
    margin-top: -18px;
    border-color:white;
    border-style:solid;
    border-radius:50%;
}

.top {
    float:left;
    height:auto;
}
.top1 {
    float:left;
    height:auto;
}
.top2 {
    float:left;
    height:auto;
}
</style>
</head>

<body>
<div class="top"><img src="Images/cmdg.jpg"  ></div>
<div class="top1"><img src="Images/cmdg.jpg"  ></div>
<div class="top2"><img src="Images/cmdg.jpg"  ></div>
</body>

</html>

Answer 2

<style type="text/css">
img{
width: 380px;
height:auto;
border-width:6px;
border-style:solid;
border-color:white;
border-radius:50%;
}
.content{
    display:table;
    margin:auto;
}
.div{
    float:left;
    width:auto;
    height:auto;
    padding:5px;
}
</style>
<div class="content">
<div class="div top"><img src="Images/cmdg.jpg" ></div>
<div class="div top1"><img src="Images/cmdg.jpg" ></div>
<div class="div top2"><img src="Images/cmdg.jpg" ></div>
</div>

让照片正确排列

2 个答案: