如何在徽标旁边放置文本区域？答案

【问题标题】：How to place textarea next to logo?如何在徽标旁边放置文本区域？
【发布时间】：2015-09-04 22:46:21
【问题描述】：

这是我的代码的次要 example。如您所见，textarea 离徽标太远。我希望它位于徽标旁边（在桌面上）和徽标下方（在移动设备上）。

文本区域的 CSS：

textarea{  
  display:block !important;
  box-sizing: padding-box !important;
  overflow:hidden !important;    
  padding:10px !important;
  width:250px !important;
  font-size:14px !important;
  border-radius:8px !important;
  border:6px solid #556677 !important;
}

【问题讨论】：

@mark.hch 小提琴有问题，现在可以了吗？
您愿意使用 flexbox 来获得完整的解决方案吗？
我不知道@Michael_B 是什么。如果它有效（即扩展有效并且很漂亮），那么当然！
Flexbox 是一个用于布局的 CSS3 模块。非常高效和最少的代码。所有主流浏览器都支持，除了 IE 8 & 9。如果你不需要支持 IE 8 & 9，它可以工作。
好的，然后@Michael_B 你会在我的示例中看到 textarea 现在是如何工作的。如果你实现了同样的功能，我会接受你的回答！

标签： jquery css jquery-mobile position textarea

【解决方案1】：

在徽标的 CSS 中添加以下行：

示例：（桌面）

#logo {
        .....
        vertical-align: middle; 
        .... 
      }

示例：（移动）

@media (max-width:your width)
     {
     #logo { 
        width: your max width! or 100%;
        margin-left:auto;
        margin-right:auto;
        ....
       }
     }

希望有帮助！

【讨论】：

【解决方案2】：

我创建了另一个 div 来包含 textarea

<div class="ui-block-solo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" id="logo">
</div>
<div class="ui-block-solo2">
    <textarea id="cagetextbox" placeholder='Talk to the Cage world!'>  </textarea>
</div>

并添加以下css：

.ui-block-solo {
    float:left;
}

.ui-block-solo2 {
    float:right;
}

这里是小提琴：http://jsfiddle.net/6me33s8y/2/

更新我自己的答案：

其实你可以在logo后面加上float:left，不用修改html代码就可以了

#logo {
    width: 200px;
    height: 169px;
    float: left;
}

【讨论】：

很好的尝试，哈利，很好！但是，迈克尔首先提出了他的解决方案（在 cmets 中，因此我将接受他）。谢谢！
@gsamaras 没问题，当我写下我的答案时，这个问题没有得到解答。很高兴你解决了你的问题

【解决方案3】：

使用 CSS Flexbox 可以轻松实现您想要的布局。

这是您需要的所有代码：

.ui-block-solo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 185px;
}

#logo {
    width: 200px;
    height: 169px;
    position: absolute;
    left: 2%;
}

@media (max-width: 500px) {
    .ui-block-solo { flex-direction: column; }
    #logo { position: static; }
}

在大屏幕上：

在较小的屏幕上：

演示：http://jsfiddle.net/6me33s8y/7/

HTML 没有变化。 JS/jQuery 没有变化。一个纯 CSS 解决方案。

注意：所有主流浏览器都支持 Flexbox except IE 8 & 9。

【讨论】：

Michael，您应该将您的用户名更新为 Michael_G，因为这很棒。但是，我在聊天中不够清楚。我希望将文本框放置在中心，而不是徽标。所以我希望徽标位于左侧，而文本框位于中心。这可能吗？
感谢您的夸奖。你在评论中所说的正是我所做的。文本框位于中心（在大屏幕上），徽标在左侧（在大屏幕上）
很高兴。该死的，在小提琴中你说的是真的，而在我的项目中，它不是。试图弄清楚！不，迈克，小提琴中发生的就是我想要的。
是的，我对 Aptana 工作室一无所知。我知道我的答案中的代码适用于 Chrome、FF、Safari 和 IE>10，但我无法告诉你 Aptana 对 flexbox 的支持。
好的，迈克，我搞定了。最后一次调整，您的答案将是理想的。检查当文本框中没有文本时会发生什么，这将是默认设置。徽标超出了标题的边框！你能在不改变标志的height 的情况下改变它吗？