Question

我正在“从网站框中获取链接”，但我似乎无法正确定位这些div。在大多数情况下，它们是正确的，但我希望标题在中心死亡，“获取链接”按钮与搜索框对齐，搜索框更靠右边。我一直在摆弄这些约45分钟并研究w3上的定位，但我无法得到它。任何指针都会有所帮助。

继承人jsfiddle

https://jsfiddle.net/j6pf08kn/1/

HTML

<body>
    <div id="top_con">
        <div id="title_con">
            <a href="swfs/welcomeflash.swf" id="downLink" download="welcomeflash">
                <header id="title">
                    Diff Lirl
                </header>
            </a>
        </div>
        <div id="share_con">
            <button id="share">Get a link!</button>
            <textarea id="link"></textarea>
        </div>
    </div>
</body>

CSS

html {
    height: 100%;
}

body {
    background-color: black;
    height: 100%;
    margin: 0;
    padding: 0;
}

header {
    margin: 0 auto;
}

#top_con {
    width: 100%;
    display: inline-block;
}

#share_con {
    float: right;
    width: 40%;
    display: inline-block;
}

#link {
    width: 50%;
    resize: none;
    margin-top: 3%;
}

#share {}

#title_con {
    width: 57%;
    float: center;
    display: inline-block;
}

#title {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: 48px;
    text-align: right;
    color: white;
    cursor: pointer;
}

a {
    text-decoration: none;
    color: white;
}

Answer 1

http://codepen.io/anon/pen/WxGepy

所以我做了一些事情。现在将它们列出来：

我扔了另一个包装纸。
我冒昧用类
我在那里评论了代码，向您展示了盒子阴影。我喜欢它们而不是边框，因为box-sizing并且效果边框具有框模型。
我改变了颜色，因为我的眼睛受伤了。
我在这里利用了几个属性，最值得注意的是 float:left;，text-align:center;和display:inline-block;
注意：当屏幕尺寸变得更小时，这确实有一个相当难看的故障。响应性不在最初的问题或范围内。（可以根据要求添加）

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #ccc;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

* {
  box-shadow: 0 0 15px 1px rgba(255, 0, 0, 0.4) inset, 0 0 0 1px rgba(0, 0, 255, 0.5);
}

.top_con {
  text-align: center;
}

.inner_con {
  display: inline-block;
}

.share_con {
  padding: 1em;
  display: inline-block;
}

.share_con,
.title_con {
  float: left;
  position: relative;
}

.title {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 48px;
  color: white;
  cursor: pointer;
  margin: 0 1em;
}

.hide_my_ass {
  visibility: hidden;
}

.share {
  vertical-align: middle;
}

.link {
  vertical-align: middle;
}

<body>
  <div class="top_con">
    <div class="inner_con">
      <div class="share_con hide_my_ass">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
      <div class="title_con">
        <a href="#" class="downLink">
          <header class="title">
            Diff Lirl
          </header>
        </a>

      </div>
      <div class="share_con">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
    </div>
  </div>
</body>

Answer 2

按钮默认设置为display: inline-block，这会导致按钮掉落而不与其他元素对齐，我在此小提琴中将其设置为display: block：https://jsfiddle.net/j6pf08kn/2/

我也给了按钮与textarea相同的margin-top，textarea本身有float: right和margin-right: 10%，你可以根据需要自定义它。

Answer 3

你可以试试这个，参考小提琴：

https://jsfiddle.net/j6pf08kn/4/

是否进行了大量代码重构：我建议您研究float和不同display属性的工作方式。

需要帮助定位这些div ...

3 个答案: