Question

我有两个跨度，我想彼此相邻。

<span id = "pic" >
    <img src="me.jpg" id = "prof">
</span>
<span id = "info">
    Lorem ipsum 
</span>

我的CSS是：

#pic{
    width: 40%; 
    float:left; 
    padding-top:6%;
    position: fixed;
    display: inline-block;
    margin-left: 15%;
}
#info{
    /*width: 40%;*/
    float:right;
    /*padding-left: 75%;*/
    padding-top:16%;
    color: white;
    display: inline-block;
}

第二个span不会浮动到第一个span的右侧，即使padding-left，或margin-left到75％，理论上我只需要45％让它在第一个跨度的左边5％。

当我没有第一个跨度作为位置固定时（我希望图片在文本滚动时保持不变）第二个跨度将弹出到第一个跨度的顶部而不是放在它旁边，或者在底部开始紧挨着底部，第一行文字与图片底部对齐。

Answer 1

这应该有效



#pic{
    width: 40%; 
    left:15%;
    padding-top:6%;
    position: fixed;
    display: inline-block;
}
#info{
    /*width: 40%;*/
    position:absolute;
    right: 0px;
    top: 16%;
    color: white;
    display: inline-block;
}

#pic{ width: 40%; left:15%; padding-top:6%; position: fixed; display: inline-block; } #info{ /*width: 40%;*/ position:absolute; right: 0px; top: 16%; color: white; display: inline-block; } 尝试一下，让我知道它是否是你想要的

Answer 2

我建议删除position: fixed;，因为这不符合您尝试实现的安排。看看它如何。

Answer 3

只有20％或20vw的空间，所以你可以将margin-left/right或padding-left/right加在一起，总共只有20％：

＆＃13;

#pic{
    width: 40%; 
    float:left; 
    padding-top:16%;
    display: inline-block;
    background-color: pink;
}
#info{
    width: 40%;
    float:right;
    padding-left: 20%;
    padding-top:16%;
    color: white;
    display: inline-block;
    background-color: red;
}

＆＃13;

<span id = "pic" >
    <img src="me.jpg" id = "prof">
</span>
<span id = "info">
    Lorem ipsum 
</span>

＆＃13;

Answer 4

基于百分比的宽度并不总是有效，除非它们包含在具有已知宽度的父级中。尝试将跨度更改为div并将其包含在另一个div中：

<div id="container">
    <div id = "pic" >
        <img src="me.jpg" id = "prof">
    </div>
    <div id="info">
        Lorem ipsum 
    </div>
    <br style="clear:both" />
</div>

CSS：

#container{
    width: 100%;
}
#pic{
    width: 40%; 
    float: left; 
    padding-top: 6%;
    margin-left: 15%;
}
#info{
    width: 45%
    float: left;
    padding-top: 16%;
    color: white;
}

两个子div都可以向左浮动。第二个堆叠在第一个的右侧。 br告诉浏览器之后清除浮点数，因此在此之后创建的任何元素都将落在下面。

Answer 5

答案可能已经很晚了，但是，我想提出一种技巧来解决我最近遇到的问题......

我有两个div，我想把它们放在彼此旁边，我已经将它们设计成内联样式以及我在这里和那里读到的所有这些技巧和解决方案，无论我做什么，它们都会垂直显示...... / p>

我想到的技术是将边界放入div并看到他们在div中获得的空间或者他们所处的任何东西......

事实证明，第一个div水平占据整个空间而另一个div不能站在它旁边...所以我缩小了第一个div的宽度，并且解决了所有解决方案。

所以这不是一个解决方案，而是寻找解决方案的技术......我希望这会对某人有所帮助。

无法将两个跨距放在一起

5 个答案: