Question

我试图放置三张图片，一张放在左边，一张放在右边，一张放在中间，两边都有相等的空格，但这段代码不起作用：

＆＃13;

 #header {
   background: lightgrey;
   background-color: rgba(256, 256, 256, 0.47);
   margin: 15px auto 0px auto;
   display: block;
   height: 80px;
   width: 965px;
 }
 #capçalera1 {
   float: left;
   margin-left: 15px;
   margin-top: 16px;
   margin-bottom: 16px;
 }
 #capçalera2 {
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 #capçalera3 {
   float: right;
   margin-right: 15px;
   margin-top: 18px;
   margin-bottom: 18px;
 }

＆＃13;

<div id="header">
  <div id="capçalera1">
    <a href="http://www.uib.cat/">
      <img src="/images/logoblue2.png" width=138px height=44px/>
    </a>
  </div>
  <div id="capçalera3">
    <a href="http://www.iac3.eu/">
      <img src="/images/iac3ieec.jpeg" width=58px height=40px/>
    </a>
  </div>
  <div id="capçalera2">
    <img src="/images/test.png" width=531px height=51px/>
  </div>
</div>

＆＃13;

左右图像都可以，但是居中的图像是＆＃34;胶合＆＃34;到左边一个。我希望能够将它放在上边距，并且与左右图像间隔相等。

感谢您的帮助！

Answer 1

<div id="header">
<h1>Library</h1>
</div>

<div id="nav">
<ul>
  <li><a href="admin.jsp" target="frame">Home</a></li>
  <li><a href="BookInf.jsp" target="frame">Books</a></li>
  <li><a href="memberInf.jsp" target="frame">Members</a></li>
  <li><a href="Messages.jsp" target="frame">Messages</a></li>
</ul>
</div>
<iframe name="frame">
<div id="footer">

</div>

这很复杂......

试试这个。

<div id="header">
    <div id="capçalera1">
   <a href="http://www.uib.cat/"><img src="/images/logoblue2.png" width=138px height=44px/></a>
   </div>
   <div id="capçalera3">
    <a href="http://www.iac3.eu/"><img src="/images/iac3ieec.jpeg"  width=58px height=40px/></a>
    </div>
       <div id="capçalera2">
   <img src="/images/test.png" width=531px height=51px/>
   </div>
</div>

CSS

<div id="header">
 <ul>
   <li><a href="http://www.uib.cat/"><img src="/images/logoblue2.png" width=138px height=44px/></a></li>
   <li><a href="http://www.iac3.eu/"><img src="/images/iac3ieec.jpeg"  width=58px height=40px/></a></li>
   <li><img src="/images/test.png" width=531px height=51px/></li>
 </ul>
</div>

Answer 2

你可以使用一个div和三个跨度，如

post /deletebranch do
  # setup my variables here
  if checkout_sha.eql? '0000000000000000000000000000000000000000'
    delete_branch(endpoint, repo_path, config_obj)
  end
end

def delete_branch(endpoint, repo_path, config_obj)
    base = config_obj['base_dir']
    if Dir.exists?(base) and Dir.exists?("#{base}/#{repo_path}")
      stream do |body_content|
        body_content << "endpoint:  #{endpoint}\n"
        body_content << "repo_path: #{repo_path}\n"
        body_content << "base:      #{base}\n"
        body_content << "\n"

        body_content << "Attempting to remove '#{repo_path}' from inside '#{base}'\n"
        logger.info("Attempting to remove '#{repo_path}' from inside '#{base}'")

        begin
          Dir.chdir(base)
          FileUtils.remove_entry_secure(repo_path, force = false)
        rescue => e
          logger.info('This exception was thrown:')
          logger.error(e)
          body_content << 'This exception was thrown:'
          body_content << e
          body_content << "\n"
          status 500
        end
      end
    end
  end

css：

<div class="container">
<span>
    <a href="http://www.uib.cat/"> <img ... ></a>
</span>
<span>
  <a href="http://www.iac3.eu/">  <img ... ></a>
</span>
<span>
    <img ... >
</span>

`

Answer 3

这看起来像是flexbox的工作！删除capcaleras上的所有样式，然后输入：

#header {
    display: flex;
    justify-content: space-around;
    background:  lightgrey;
    background-color:  rgba(256, 256, 256, 0.47);
    margin: 15px auto 0px auto;
    display: block;
    height: 80px;
    width: 965px;
}

但请记住，support对此并不好。

Answer 4

试试这个CSS表格布局，请参阅演示和评论。

https://jsfiddle.net/bgnbwus2/

#header {
  display: table;
  border-collapse: separate;
  border-spacing: 15px 0; /*left and right spacing*/
  width: 100%;
}
#header > div {
  display: table-cell;
  border: 1px solid red;
}
#header > div:nth-child(2) {
  width: 100%; /*taking as much space as possible*/
  text-align: center; /*center the image inside*/
}

<div id="header">
  <div>
    <img src="https://unsplash.it/138/44" />
  </div>
  <div>
    <img src="https://unsplash.it/531/51" />
  </div>
  <div>
    <img src="https://unsplash.it/58/40" />
  </div>
</div>

CSS：三张图片，一张左边，一张中心，一张右边

4 个答案: