Question

我在制作网站时遇到了麻烦。我不能让3张照片在一行中对齐。

<div>
				<img src="Images/mcdonalds.jpg" width="300px" height="180px">
				</div>
				<div>
				<img src="Images/cilipica.jpg" width="300px" height="180px">
				</div>
				<div>
				<img src="Images/mythay.jpg" width="300px" height="180px" >
				</div>

使用

float: left

Answer 1

div本来就是display:block

您需要使用具有span

的display:inline-block之类的内容

https://jsfiddle.net/7daffjh8/2/

Answer 2

请参阅此fiddle

将display的{{1}}属性更改为div而不是inline-block

将以下内容添加到CSS中

block

Answer 3

试试这个

在div上添加float:left

div {
  float:left
}

<div>
      <img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
  <img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
  <img src="Images/mythay.jpg" width="300px" height="180px" >
</div>

Answer 4

我希望这会有所帮助。

请参阅Fiddle

上的示例

startProgress(); // handle showing progress view somehow
Picasso.with(getActivity()).load(imageUrl).fetch(new Callback() {
    @Override
    public void onSuccess() {
        Picasso.with(getActivity()).load(imageUrl).into(imgViewMedia);
        stopProgress(); // handle stopping progress view somehow
    }

    @Override
    public void onError() {

    }
});

Answer 5

试试这个：

你曾经使用过多次。关闭下一个标记后，内容始终显示在下一行。

<div>
    <img src="Images/mcdonalds.jpg" width="300px" height="180px">
	<img src="Images/cilipica.jpg" width="300px" height="180px">
	<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>

Answer 6

你必须使div显示为内联。在CSS下

div{
display:inline;
}

或

<div style="display:inline;">
            <img src="Images/mcdonalds.jpg" width="300px" height="180px">
            </div>
            <div style="display:inline;">
            <img src="Images/cilipica.jpg" width="300px" height="180px">
            </div>
            <div style="display:inline;">
            <img src="Images/mythay.jpg" width="300px" height="180px" >
            </div>

Answer 7

div.minihalf-width{
  width:30%;
  float:left
}
div.minihalf-width img{
    width: 100%;
}

 <section>
            <div class="minihalf-width">
                <img src="latest-work/work-1.png"  alt="">
            </div>
            <div class="minihalf-width">
                <img src="latest-work/work-2.jpg"  alt="">
            </div>
            <div class="minihalf-width">
                <img src="latest-work/work-3.jpg" alt="">
            </div>
        </section>

CSS / HTML无法在同一行

7 个答案:

请参阅此fiddle