无法让照片在div中彼此对齐

Here is my code: http://pastebin.com/pDkM4FQi

这是我的代码:http://pastebin.com/pDkM4FQi

#img1,
#img2,
#img3,
#img4 {
  display: inline-block;
  height: 100%;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
#navSplitter {
  background-color: gray;
  display: inline-block;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}

<div id="navBar">
  <div id="navSplitter" style="background-color: black;" />
  <img id="img1" src="img1.png" />
  <div id="navSplitter" />
  <img id="img2" src="img2.png" />
  <div id="navSplitter" />
  <img id="img3" src="img3.png" />
  <div id="navSplitter" />
  <img id="img4" src="img4.png" />
</div>

I can't get the images to line up in the navBar div. I tried everything I know about code, and even looked up some stuff but never found what I need to get these images to go on there with the splitters in between each picture.

我无法让图像在navBar div中排成一行。我尝试了所有关于代码的知识,甚至查找了一些东西,但从未找到我需要的东西,让每个图片之间的分割器都可以使用这些图像。

8 个解决方案

#1

How about putting all of the images in just one <div> and then add a left-padding and right-padding to the images? This way you don't have to deal with the alignment of the images that much.

如何将所有图像放在一个

中,然后在图像中添加左边填充和右边填充?这样你就不必那么多地处理图像的对齐。

Please note that id tags are unique. You don't use them everywhere in the html file. Use class if you need

请注意,id标签是唯一的。你不要在html文件中的任何地方使用它们。如果需要,请使用课程

#2

Try this:- remove margin-left: 20px from #naviSplitter

试试这个: - 从#naviSplitter中删除margin-left:20px

<head>
    <style>
        #img1, #img2, #img3, #img4 {
            display: inline-block;
            height: 100%;
        }

        #navBar {
            background-color: white;
            border: 1px solid white;
            border-radius: 15px;
            display: inline-block;
            height: 100px;
            margin: auto;
            margin-top: 50px;
            width: 1200px;
        }

        #navSplitter {
            background-color: gray;
            display: inline-block;
            height: 80px;
            /*margin-left: 20px;*/
            margin-right: 20px;
            width: 3px;
        }
    </style>
</head>
<body>
    <div id="navBar">
        <div id="navSplitter" style="background-color: black;"/>
        <img id="img1" src="img1.png"/>
        <div id="navSplitter"/>
        <img id="img2" src="img2.png"/>
        <div id="navSplitter"/>
        <img id="img3" src="img3.png"/>
        <div id="navSplitter"/>
        <img id="img4" src="img4.png"/>

    </div>
</body>

#3

The issue is in your HTML. There is no concept of self closing div tags in HTML 4.x.

问题出在您的HTML中。 HTML 4.x中没有关闭div标签的概念。

change this <div id="navSplitter"/> to <div id="navSplitter"></div>.

将此

更改为

。

or my suggestion is to use <span></span> tag to add splite because span is by-default inline-block element.

或者我的建议是使用标记添加splite,因为span是默认的inline-block元素。

Hope this would help your issue.

希望这会对你的问题有所帮助。

#4

divs aren't a self closing tag, which you are doing, therefore invalid HTML and by consequence the images are not working as expected.

div不是你正在做的自我关闭标记,因此HTML无效,结果图像无法按预期工作。

So, I advise you to forget using div for splitting the images and just use a HTML list and then using a pseudo element ::before instead.

所以,我建议你忘记使用div来分割图像,然后使用HTML列表,然后再使用伪元素::之前。

And to align, you need vertical-align:top because inline-block is baseline by default

要对齐,您需要vertical-align:top,因为默认情况下inline-block是基线

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}
ul {
  font-size: 0
}
li {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin: 0 5px
}
li::before {
  background-color: gray;
  display: inline-block;
  vertical-align: top;
  height: 100px;
  left: -5px;
  width: 3px;
  content: "";
  position: relative
}

<div id="navBar">
  <ul>
    <li>
      <img id="img1" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img2" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img3" src="//dummyimage.com/100x100" />
    </li>
    <li>
      <img id="img4" src="//dummyimage.com/100x100" />
    </li>
  </ul>
</div>

#5

Maybe you would rather something like this.

也许你宁愿这样的事情。

<div id="nav-bar">
  <img src="http://dummyimage.com/80&text=1" alt="">
  <img src="http://dummyimage.com/80&text=2" alt="">
  <img src="http://dummyimage.com/80&text=3" alt="">
  <img src="http://dummyimage.com/80&text=4" alt="">
</div>

Don't worry about closing tags for img elements anymore. But do make sure you write something descriptive in the alt attribute about what the image content is for people with disabilities.

不要担心为img元素关闭标签了。但请务必在alt属性中写一些关于图像内容对于残障人士的描述。

html {
  font-size: 16px;
}

I'm using rems to do most measurements. rems are based off of a base font-size. So we tend to set it in the html element. I think 16px is a good standard these days. 1rem therefore is 16px.

我正在使用rems进行大多数测量。 rems基于基本字体大小。所以我们倾向于在html元素中设置它。我认为现在16px是一个很好的标准。因此1rem是16px。

Using measurements like this allows you to arrange things relatively. You could also interchange with ems if you wanted to. They are based off of the parent element font-size.

使用这样的测量可以让你相对安排。如果你愿意,你也可以与ems交流。它们基于父元素font-size。

#nav-bar {
  max-width: 1200px;
  width: 100%;
  margin: 2rem auto;
  text-align: center;
  background-color: white;
  border-radius: 1rem;
  display: inline-block;
  padding: .5rem;
}
#nav-bar img {
  display: inline-block;
}
#nav-bar img:not(:last-child) {
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 3px solid gray;
}

Instead of using an HTML element for aesthetics, we can push that into the CSS completely.

我们可以完全将其推入CSS中,而不是使用HTML元素来实现美学。

I use a right border on those navigation images and make use of the not pseudo-class combined with last-child as :not(:last-child) which selects all the images except the last one. So you don't see the right border at the end.

我在这些导航图像上使用右边框,并使用非伪类与last-child结合使用:not(:last-child),它选择除最后一个之外的所有图像。所以你最后看不到合适的边框。

#6

Your HTML is not valid. div tags cannot be closed this way.

您的HTML无效。 div标签不能以这种方式关闭。

<div />.

div tags are properly used this way.

div标签以这种方式正确使用。

<div></div>

Due to the lack of closing tags, your images and splitters are nested. This happens because your browser does not know how to display your page since the opened/closed tags don't match up. It is then trying to fix your code by adding a bunch of closing tags at the bottom of the code, one closing tag for each opened one that was not closed.

由于缺少结束标签,您的图像和分割器是嵌套的。发生这种情况是因为您的浏览器不知道如何显示您的页面,因为打开/关闭的标签不匹配。然后尝试通过在代码底部添加一堆结束标记来修复代码,为每个未打开的标记添加一个结束标记。

By simply closing your div tags, your images will align properly. Your CSS is valid.

只需关闭div标签,图像就会正确对齐。你的CSS有效。

#7

No one talks about FLEXBOX. Still care about old IE?

没有人谈论FLEXBOX。还在乎老IE吗?

#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  width: 1200px;
display: flex;
justify-content: center;
align-items: center;
}
img { width: 100px; height: 100px; background: red; }
hr {
  border: none;
  background-color: gray;
  height: 80px;
  margin-left: 20px;
  margin-right: 20px;
  width: 3px;
}

<div id="navBar">
  <img id="img1" src="img1.png" />
  <hr>
  <img id="img2" src="img2.png" />
  <hr>
  <img id="img3" src="img3.png" />
  <hr>
  <img id="img4" src="img4.png" />
</div>

#8

I would recommend removing the navSplitter elements completely, as they add an extra set of items (unnecessarily) that will need to be styled to ensure the images line up. Instead, you can just add padding / borders to the images individually, which will separate them as desired. Consider the following:

我建议完全删除navSplitter元素,因为它们会添加一组额外的项目(不必要),需要进行样式设置以确保图像排列。相反,您可以单独为图像添加填充/边框,这将根据需要将它们分开。考虑以下:

.image {
  display: inline-block;
  height: 100%;
  padding: 20px;
  border-right: 3px solid gray;
}

.image:last-of-type {
  border-right: none;
}
#navBar {
  background-color: white;
  border: 1px solid white;
  border-radius: 15px;
  display: inline-block;
  height: 100px;
  margin: auto;
  margin-top: 50px;
  width: 1200px;
}

<div id="navBar">
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
  <img class="image" src="http://placehold.it/150x150" />
</div>

#1