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

Question

这是我的代码的一小部分 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;
}

Answer 1

我创建了另一个 div 来包含文本区域

<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;
}

这里是fiddle：http://jsfiddle.net/6me33s8y/2/

更新我自己的答案：

实际上，您只需将 float: left 添加到徽标中，无需更改 html 代码即可使用

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

Answer 2

使用 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。

Answer 3

在您的 CSS 徽标中添加行：

示例：（桌面）

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

示例：（手机）

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

希望对您有所帮助！

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

How to place textarea next to logo?

css

jquery

textarea

position

jquery-mobile