html5：将文本和图像水平并排放置，并在它们之间加上虚线边框

Question

我有一个文字和一个图像，我想在一个边框部分水平并排放置。并希望它们之间有一个垂直虚线边框。我怎么做？下面的代码将它们放在一起。

.borderexample {
    border-style:solid;
    border-color:#287EC7;
}

<section class="borderexample" id="data_zone"></section>
<script>
    var color = "some text";
    document.querySelector('#data_zone').innerHTML = '<p><strong>' +
        color + '</strong></p>' + '<img id="badsign" src="fp2.jpeg" />';
</script>

Answer 1

您可以创建父display: flex;，将img包裹在元素中，使其不stretch，然后在border上使用p或者包裹图像以绘制虚线垂直线的元素。

.borderexample {
  border-style: solid;
  border-color: #287EC7;
  display: flex;
}
p {
  border-right: 2px dotted #287EC7;
  padding-right: 1em;
  margin: 0 1em 0 0;
}
img {
  max-width: 100%;
}

<section class="borderexample" id="data_zone">

</section>

<script>
  var color = "color";
  document.querySelector("#data_zone").innerHTML =
    "<p><strong>" +
    color +
    "</strong></p>" +
    '<div><img id="badsign" src="http://kenwheeler.github.io/slick/img/fonz1.png" /><div>';
</script>

Answer 2

使用display: inline-block

如果不确切知道您希望获得什么样的视觉效果，很难确切知道要向您展示什么。但这是一种方法。

我还使用pseudo elements和vertically aligned图片添加了一些填充。

＆＃13;

＆＃13;

.borderexample {
    border-style:solid;
    border-color:#287EC7;
}
p {
    display: inline-block;
    border-right: 1px dotted black;
}
img {
    vertical-align: middle;
}
p:after {
    margin-right: 1em;
    content: "";
}
img:before {
    margin-left: 1em;
    content: "";
}

＆＃13;

<section class="borderexample" id="data_zone"></section>
<script>
    var color = "some text";
    document.querySelector('#data_zone').innerHTML = '<p><strong>' +
        color + '</strong></p>' + '<img id="badsign" src="fp2.jpeg" />';
</script>

＆＃13;

＆＃13;

＆＃13;

将边框直接应用于<img>

在下面的评论之后，我想知道这可能是更好的方法吗？

我还简化了CSS，并删除了伪元素的使用。

＆＃13;

＆＃13;

.borderexample {
    border-style: solid;
    border-color: #287EC7;
}
p {
    display: inline-block;
    margin-right: 1em;
}
img {
    vertical-align: middle; /* optional */
    border-left: 1px dotted black;
}

＆＃13;

<section class="borderexample" id="data_zone"></section>
<script>
    var color = "some text";
    document.querySelector('#data_zone').innerHTML = '<p><strong>' +
        color + '</strong></p>' + '<img id="badsign" src="fp2.jpeg" />';
</script>

＆＃13;

＆＃13;

＆＃13;