从单独的容器div

Question

我正在尝试制作＆＃34;结束＆＃34;在下面的代码中显示与lorem ipsum内联，并且无法弄清楚如何。可能吗？我根本无法改变HTML结构。 （也不能添加js等）

＆＃13;

＆＃13;

#parent {
  width: 300px;
  border: 1px solid red;
}

#block2 a {
  color: #00f;
}

＆＃13;

<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望它看起来像这样：

Answer 1

如果您能够对CSS进行更改，那么这是一个简单的解决方案。只需使用display: inline，这将使元素只占用所需的空间（就像<span>元素一样）。

然而，如果是偶然的，你无法做到，那么根据你的情况，我无法想到让你实现这一目标。

＆＃13;

＆＃13;

#parent {
  width: 300px;
  border: 1px solid red;
}

#block1, #block2 {
  display: inline;
}

#block2 a {
  color: #00f;
}

＆＃13;

<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要将两个块容器设置为display: inline：

＆＃13;

＆＃13;

#parent {
  width: 300px;
  border: 1px solid red;
}

#block2 a {
  color: #00f;
}

#block1, #block2 {
  display: inline;
}

＆＃13;

<div id="parent">
  <div id="block1">
    <a> Lorem ipsum dolor sit amet, consectetur elit.  dolor nulla. Duis lob.</a>
  </div>
  <div id="block2">
    <a>The end</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;