Question

文本不想包裹在图像的右侧。它应该在右侧与它相对，它之间有一点间距。

这就是这个栏应该是什么样子，下面必须是一个间隔（线）http://i.imgur.com/jYWmU7Y.png，这将是这个链接上的样式14 https://codepen.io/ibrahimjabbari/pen/ozinB

希望任何人都可以帮助我。

段：

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

.container {
  margin-left: auto;
  margin-right:auto;
  display:block;
  width: 65%;
}

#statistics_background {
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid;
  width: 100%;

  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

.statistics_header {
  margin: 15px;
}

.summoners_name {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
  <a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>
</div>
<div class="container">
  <div id="statistics_background">
    <div class="statistics_header">
      <img class="summoners_icon clearfix" src="https://placeholdit.imgix.net/~text?txtsize=12&txt=95%C3%9795&w=95&h=95" alt="Summoners Icon">
      <div class="summoners_name">
        <h3>Summoners Name</h3>
      </div>
    </div>
  </div>
</div>
<?php include 'footer.php'; ?>

Answer 1

你把文字浮动了。

.summoners_name {
  float: right;
}

Answer 2

试试这个。将图像和文本向左浮动并将clearfix应用于父级，而不是图像。（把它与含有元素放在一起）。当您清除房产时，清空房产，而不是正在浮动的房产本身。向左浮动将通过打破堆叠顺序折叠您的div，但clearfix将使其更好。向右浮动并不能解决您的问题。

在容器中为div赋予width属性。我不想为你解决这个问题，所以我没有写出确切的代码答案。但是您希望包含的元素在宽度方面位于容器内。请记住，宽度不考虑你的填充和边距，所以如果你想要空间，你可以尝试28％和68％，1％的边距和填充。或者，您可以使用calc参数（不支持IE8）

示例：

<div class="container clearfix">

CSS：

.container{
 width:100%
};

.img-icon{
width:30%;
float:left;
};

.summoners-name{
width:70%
float:left;
};

来自您的代码： - 此示例有其自身的问题 - 但是这只是让您了解如何正确浮动和清除您的项目以便正确坐下。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php define('DeniedAccessFiles', TRUE); ?>

<?php include 'header.php'; ?>
<div class="logo">
  <a href="<?php echo "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>
</div>
<div class="container clearfix">
  <div id="statistics_background clearfix">
    <div class="statistics_header">
      <img class="summoners_icon " src="https://placeholdit.imgix.net/~text?txtsize=12&txt=95%C3%9795&w=95&h=95" alt="Summoners Icon">
      <div class="summoners_name">
        <h3>Summoners Name</h3>
      </div>
    </div>
  </div>
</div>
<?php include 'footer.php'; ?>

CSS：

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  vertical-align: baseline;
  outline: none;
}

.container {
  margin-left: auto;
  margin-right:auto;
  background-color: rgba(0, 0, 0, 0.7);
  width: 65%;
}

#statistics_background {
  margin:0 auto;
  border: 1px solid;
  width: 65%;


  -moz-border-image: -moz-linear-gradient(top, #006184 0%, #303142 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #006184 0%, #303142 100%);
  border-image: linear-gradient(to bottom, #006184 0%, #303142 100%);
  border-image-slice: 1;
}

.statistics_header {
 height:150px;  
}

.summoners_name {
  float: left;
  padding:20px;
}
.summoners_icon{
  float:left;
  padding:20px;
}

Answer 3

你搞砸了你的锚标签。你已经添加了一个额外的“＆gt;。

纠正它编辑：

使用 <a href="<?php echo 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"><img src="images/logo.png"></a>

在右侧图像旁边包装文本

3 个答案: