Question

我想让文字和图片保持一致。尝试使用之前提出的问题中的一些代码，但没有任何帮助......

以下是代码：

<div class="form-group form-group1">
                        <span class="mainh">some<br>text</span><br>
                        <span class="mainh1">some text</span><br>
                        <img src="img/logo/newlogo.png" class="img-responsive" pull-right>
                        </div>

CSS：

.form-group1{
margin-top: 100px;
margin-bottom: 100px;
margin-left: 400px;
vertical-align: middle;
}

.mainh{
color: #000;
line-height:28px;
font-size: 43px;
font-family: Arial Black;
}

.mainh1{
color: #000;
font-size:25px;
font-family: Arial;
font-weight: 600;
}

https://jsfiddle.net/pdpgwwp5/

Answer 1

喜欢这个吗？

.form-group1 {
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 400px;
    vertical-align: middle;
}
.mainh {
    color: #000;
    line-height:28px;
    font-size: 43px;
    font-family: Arial Black;
}
.mainh1 {
    color: #000;
    font-size:25px;
    font-family: Arial;
    font-weight: 600;
}

<div class="form-group form-group1">
    <span class="mainh">some text</span>
    <span class="mainh1">some text</span>
    <img src="img/logo/newlogo.png" class="img-responsive" pull-right>
</div>

HTML中的
标签会导致换行符。

Answer 2

<span>和<img>都是内联元素，因此它们将是一行...如果您删除换行符（<br />）

＆＃13;

.form-group1 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-left: 400px;
  vertical-align: middle;
}
.mainh {
  color: #000;
  line-height: 28px;
  font-size: 43px;
  font-family: Arial Black;
}
.mainh1 {
  color: #000;
  font-size: 25px;
  font-family: Arial;
  font-weight: 600;
}
.form-group span {
  float: left;
  clear: left;
}
.form-group img {
  float: right;
}

＆＃13;

<div class="form-group form-group1">
  <span class="mainh">some text</span>
  <span class="mainh1">some text</span>
  <img src="img/logo/newlogo.png" class="img-responsive pull-right" />
</div>

＆＃13;

注意，我将pull-right放在class属性中，我猜这是一个错字。

将徽标放在与文本相同的行中+能够调整引导程序的大小？

2 个答案: