CSS文本和图像对齐％

Question

我是CSS的真正初学者...... 你知道怎么做这种对齐吗？我尝试了很多东西，但是我没有得到我需要的东西...所以如果你有任何代码的想法我就画它...

<div id="sys-wrap">
  <img src="image.png">
  <p>Long message texte</p>
</div>

#sys-wrap {}    
#sys-wrap p {
  border: 1px solid #ffffff;
  float:left;
  margin: 15px;
  width: 691px;
}
#sys-wrap img {
  border: 1px solid #ffffff;
  float: left;
  margin: 15px 15px 15px 100px; 
  vertical-align: top;
}

谢谢！

Answer 1

我做了一个小提琴。这对你有用吗？

https://jsfiddle.net/hnf8jou4/3/

HTML：

<div>
  <div id="left">
    <img src="http://lorempixel.com/400/200" id="inner">
  </div>
  <div id="right"></div>
</div>

CSS：

#left {
  width:25%;
  height:200px;
  float: left;
  background-color:#f00;
}

#right {
  width:75%;
  height:200px;
  background-color:#0f0;
}
#inner {
  display:block;
  width:100px;
  margin-left: auto;
  margin-right: 0;
  background-color: #00f;
}

Answer 2

目前还不清楚你究竟想要达到的目标。但是，因为我看到你的画，我想这是你需要的。你需要有一个div来换行并将-X添加到右侧float: right。其他的东西只是用％和paddings来玩高度。

https://jsfiddle.net/hnf8jou4/4/

Answer 3

对于CSS文件中的#sys-wrap img，添加float: right;和margin 15px

您的新CSS应该与此类似：

#sys-wrap img {
  width: 50px;
  height: 50px;
  border: 1px solid #ffffff;
  float: right;
  margin: 15px; 
}

另外，给它的父容器设置一个宽度和高度：

#sys-wrap {
  width: 150px;
  height: 150px;
  background: red; // just to make it pretty
}

就像有点fyi一样，vertical-align不起作用，除非指定的元素有display table-cell。 ： - ）

这是一个小提琴：https://jsfiddle.net/d2ae3ub3/