Question

我在WordPress页面中有以下代码。我希望它像两列表一样布局。但是我根本无法做到这一点。它始终把'＃34;左'和＃34;一列上的列，左对齐;然后第二个div与图片总是放在第一个下面的另一行，但右对齐。

我需要什么CSS来实现这一目标：

|这是第一个|第二个div与pic和居中文本在pic |

＆＃13;

<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
</div>

＆＃13;

修改左对齐的DIV需要占用我所拥有的剩余空间，因为＆＃34;向右浮动＆＃34;没用。

Answer 1

在左侧列之前添加右侧列。并给出宽度和浮动到右列。它不需要给左列提供浮动

＆＃13;

<div style="width:100%">
 <div style="text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
<div style="width:auto;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>

</div>

＆＃13;

Answer 2

试试这个：

 <div class="one">
<div style="vertical-align:top;display:inline-block;float:left;width:360px;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;margin-top:25px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:10px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
</div>

DEMO HERE

Answer 3

试试这个，你可以看到div之间没有空格，因为我添加了你可以注意到的背景颜色。

    <div>
    <div style="width:50%;height:auto;vertical-align:top;display:inline-block;float:left;background:#f22;">
    <p>Travel</p>
    <p>Pictures, videos, and other information to some places visited including:
    Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
    </p>
    </div>
    <div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:50%;height:auto;background:#f2f;">
    Boogie-Woogie Piano
    <a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="https://source.unsplash.com/random" alt="Rock'n'Roll Piano! Click to see!"></a>
    </div>
    </div>
img{
  width:100%;
  min-height:100%;
}

Answer 4

以下是如何实现两列，您可以更改宽度以匹配您想要实现的目标。

BluetoothDevice

Answer 5

您可以向父元素添加display:table;并将子元素更改为display:table-cell;，这样您就可以根据需要使用垂直对齐

至于图像上的文字，最简单的方法是删除第二个div并将样式应用到<a>并将图像设置为背景

还尝试将所有内联样式移动到css文件

<div style="display:table">
<div style="vertical-align:top;display:table-cel;">
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>
<a style="vertical-align:middle;display:table-cell;width:160px; background-image: url(/interests/Piano/spook_piano_small.jpg)">
Boogie-Woogie Piano
</div>

Answer 6

你可以做的是不将你的文本部分放在<div>标签中，只使用右对齐的第二个<div>，并且你在第一个div中提到的所有文本部分都将换行在它周围，它看起来像一个有两列的表，就像你想要它。你可以检查下面的代码，以了解我想说的是什么

<div>
<div style="vertical-align:top;display:inline-block;text-align:center;float:right;width:160px;">
Boogie-Woogie Piano
<a href="/interests/Piano/"><img style="margin-top:0px;" class="aligncenter" src="/interests/Piano/spook_piano_small.jpg" alt="Rock'n'Roll Piano! Click to see!"></a>
</div>
<p>Travel</p>
<p>Pictures, videos, and other information to some places visited including:
Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
</p>
</div>

我希望这有助于解决您的问题。请为任何查询发表评论。

Answer 7

正如我所理解的那样，您需要将该部分分成2列也不能与内联css一起使用。欢呼声

	.try1{
		width: 50%;
		float: left;
	}
	.try2{
		width: 50%;
		float: right;
	}

<div class="all">

		<div class="try1">
			<p>Travel</p>
			<p>Pictures, videos, and other information to some places visited including:
			Australia, New Zealand, and America. <a href="/adventures/">See more...</a>
			</p>
		</div>
		  
		<div class="try2">
			Boogie-Woogie Piano
			<a href="#"><img  class="aligncenter" src="http://placehold.it/150x150" alt="Rock'n'Roll Piano! Click to see!"></a>
		</div>
	</div>

带有CSS的两列DIV根本不适合我:(

我需要什么CSS来实现这一目标：

|这是第一个|第二个div与pic和居中文本在pic |

7 个答案: