Question

我正在尝试将两个图像对齐到左侧，另一个图像对齐到文本右侧。然后让文本从图像下方的中间向下流动。我认为这应该相当容易，但不能让它工作。 https://jsfiddle.net/b9nc02cu/

<div style="width:100%">
<div style="float:left"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div>

<div style="float: left; top: 150px; left: 5px;"><span style="font-size: 30px;">Today is September 12, 2015. It's a saturday partly cloudy</span></div>

<div style="float: right;"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div>
</div>

Answer 1

我认为你需要像this一样的东西。

＆＃13;

l_odd_even([]). 
l_odd_even([H|T], Odd, [H|Etail]) :-
    H rem 2 =:=0,
    split(T, Odd, Etail). 
l_odd_even([H|T], [H|Otail], Even) :-
    H rem 2 =:=1,
    split(T, Otail, Even).

＆＃13;

#container {
   width: 100%;
}

#container > div {
    display: table-cell;
}

#left {
    min-width: 150px;
    height: 150px;
}

#middle {
    vertical-align: top;
    height: 150px;
}

#right {
    min-width: 150px;
    height: 150px;
}

＆＃13;

Answer 2

img和span元素具有内联显示。

删除3个元素中每个元素的父div将为您提供所需的结果

Answer 3

您应该设置中间列的宽度。如果你瞄准较新的浏览器，可以将其设置为calc（100％ - 300px）;

<div style="width:100%">
    <div style="float:left"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div>
    <<div style="float: left; top: 150px; width: calc(100% - 300px);"><span style="font-size: 30px;">Today is September 12, 2015. It's a saturday partly cloudy</span></div>
    <div style="float: right;"><img style="width: 150px; height: 150px;" src="https://pbs.twimg.com/profile_images/378800000442759461/b483cdd049f470928e7b20051f95b8cc.jpeg"></div>
</div>

https://jsfiddle.net/b9nc02cu/1/

将图像左对齐，文本中心，图像对齐在同一行

3 个答案: