Question

我的代码遇到了一些问题：

$student_id    = strtoupper((string)$this->input->post('student_id'));
$course_id     = strtoupper((string)$this->input->post('course_id'));

以下是我在firefox浏览器中的样子：

这是我想要实现的目标：

所以基本上，我试图从.expandedMsg的顶部获取一点边距，并且还要使.expandedMsg .expandTop在文本溢出时垂直增长，因此背景将是空白。最后由于某种原因标题：文字不在同一行...... 我现在得到的是一团糟，我将非常感谢任何帮助。提前谢谢。

Answer 1

打开<p>标签中的文字。如果你希望<b>Title</b>与文本的其余部分一起显示内联（实际上是内联），你需要分解文本，这样它就不是一条巨大的连续线。

最新的更新涉及一个嵌套的浮动内联块是的，它很奇怪，但它允许你更多地控制边距和填充（浮动元素喜欢忽略）。

/* defaults */
html {
  font: 400 12px/1.428 Consolas
}

/* This is important in any layout, it gives all of the other percentages 
a reference point.
*/
html,
body {
  width: 100%;
  height: 100%;
}

.expandedMsg {
  /* It will never be lower than 10vh */
  min-height: 10vh;
  /* It will expand vertically with content */
  height:auto;
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap: break-word;
  background-color: #C1DCE6;
  overflow:hidden;
  /* Increase the first number to move the text down */
  padding:10px 10px 10px;
}

.expandedMsg img {
  height: 9vh;
  width: 9vh;
  float: left;
  /* Necessary so that margins work */
  display: inline-block;
  /* Decrease the first number in order to go up */
  margin: -5px 5px 0;
}

.text {
/* This is applied to the text on a double <span> */
display:inline-block
float:left
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!-- 
NOTE there's a <span> nested within a <span> and they share the same class
-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
  <span class='text'><b>Title:</b><span class='text'>Lorem ipsum dolor sit amet, viderer elaboraret percipitur te nam, mei et option iudicabit. Et semper nostro conceptam mea, tale evertitur cu nec. Eu error utamur his, an sumo vero insolens has. Ei laudem ubique numquam ius.

Explicari theophrastus ex eam, sint ipsum consequuntur cu vim. Ad epicuri dissentiunt efficiantur qui, ea decore principes his. Mea ne euismod oportere. Qui solum elitr ne, quo at tamquam omittam. Est quodsi vivendo vituperatoribus id, qui cu esse justo audiam.

Graeco sanctus gloriatur per ei. Ei debet lobortis duo. An quem aperiam has, ius nisl abhorreant id. Pri in cibo probatus petentium.

Nec idque appetere principes at, mazim quidam scripta mei at, erat munere te eam. Case convenire contentiones vis ut, at habeo facete epicuri est, cu malis partiendo pri. Et integre veritus duo, cum discere laoreet alienum no. Eu eos amet primis fastidii, id duis inani vim, feugiat postulant scribentur his ex. Alienum delicatissimi sea ut.

Ne mediocrem liberavisse nam, probo ancillae voluptatibus te eos. Usu ne ridens persecuti. Novum accumsan convenire et vim. Qui iisque ponderum deseruisse eu, pro alii utinam vivendo id, audire definiebas posidonium nec no. Omnium eruditi duo cu. Te dico nonumy perpetua vim, cum menandri dignissim sententiae ut, id cum decore meliore referrentur.

Sed no dolor ceteros. Aeterno accusamus urbanitas sit te. Viris prompta vix ei, ea mea ullum iusto. Ius dignissim consequuntur an. In solet erroribus dissentias nam, possim suscipiantur ei mea.

His equidem impedit intellegebat te, per hinc ignota cu. Gubergren persecuti philosophia an mei. In sit modo adhuc decore, suas facilisi vis an. Eos in tempor conclusionemque, ei vis habeo prima, ut autem ridens epicurei est. Modus sanctus euripidis ut eum. Quo natum assum te, eos an bonorum adolescens. At autem fuisset sea, et usu reque vitae complectitur.

Id saperet constituam consectetuer mel. Minim essent debitis pri ut. Sit natum dicunt nominati cu. Veritus constituam eam at, vel ei assum iisque, quo case illud perfecto ei. Ut libris audire nam, vel atqui phaedrum no.

Mei ne viris tibique aliquando, sea et imperdiet dissentiunt. Erat impetus suscipit ex nec, sea eu unum falli. Vix ea alterum interpretaris, te partem populo eos. Tempor incorrupte sea ex, et mei graeco quaestio volutpat, ius in nihil munere. Qui an solet sapientem, ex eros regione maluisset quo. Laudem electram id per, no pro nisl graeci dicunt, id graecis pericula conclusionemque qui. Mollis alienum in vim, te tritani delenit pri.

Sit viderer graecis id, quo id mutat reprimique, vidisse salutandi adolescens an est. Vim ex omittam consetetur, no everti laoreet fierent vim. Minim consul efficiendi an vis, saperet sadipscing ei nec. Etiam definiebas eu sea, ex oblique adversarium sed. Lorem simul per ne, cu has nisl vitae nemore. Reque labitur liberavisse an nam.</span></span>
</div>

Answer 2

你的榜样相当不切实际。文本包含一定长度不超过......的单词 - 无论如何。你的文字包含一个单词，其长度跨越几行 - 完全不现实......

如果您使用下面的代码段中的真实世界文字，则为图片分配float: left就完全可以了。

＆＃13;

.expandedMsg {
  min-height: 10vh;
  padding-bottom: 0.4%;
  word-wrap: break-word;
  background-color: #C1DCE6;
}

.expandedMsg img {
  height: 9vh;
  width: 9vh;
  float: left;
  margin-right: 0.5em;
}

.expandTop {
  margin-left: 2px;
  font-size: 1.2vw;
}

.expandedMsg b {
  display: inline-block;
  padding-top: 4px;
}

＆＃13;

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, </span>
  </p>
</div>

＆＃13;

Answer 3

这是因为你的dddddddd都是一个单词，这意味着文本不会换行。如果您使用类似于带有空格的普通文本结构的文本，那么它将正确包装。

.expandedMsg{
  height: 10vh;
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap:break-word;
  background-color: #C1DCE6;
}
.expandedMsg img{
  height: 9vh;
  width: 9vh;
  float: left;
}
.expandedMsg b {
  display:inline;
}
.expandTop{
  margin-left: 2px;
  font-size: 1.2vw;
  width: 100%;
  height: 100%;
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor sem porttitor quam sollicitudin, nec gravida nulla egestas. Vivamus a velit id arcu feugiat mattis. Sed sed sem condimentum, rutrum risus non, sodales urna. </span>
  </p>
</div>

我刚注意到你已经有word-wrap:break-word;这是我的第二个解决方案。我通过删除HTML标记中的空白区域，只需将span标记放在b标记旁边即可开始工作。

.expandedMsg{
  /* height: 10vh; */
  text-align: left;
  width: 100%;
  padding-bottom: 0.4%;
  word-wrap:break-word;
  background-color: #C1DCE6;
}
.expandedMsg img{
  height: 9vh;
  width: 9vh;
  float: left;
}
.expandedMsg b {
  display:inline;
}
.expandTop {
  margin-left: 2px;
  font-size: 1.2vw;
  width: 100%;
  height: 100%;
}
.expandedMsg:after {
 content:" ";
 display:table;
 clear:both;
}

<div class="expandedMsg">
  <img src="https://pbs.twimg.com/profile_images/378800000334311614/cdfed842c12b1964f784d03f0fdb9a30_400x400.jpeg">
  <p class="expandTop">
    <b>Title:</b><span>dddddddddddddddddddddddd</span>
  </p>
</div>

Answer 4

您是否尝试将图像和文字并排放置？如果是这样，您可能希望在expandedMsg div中有2个div（一个用于图像，一个用于文本）。一旦你有了，你可以使用文本div的边距和比例

将文本定位在图像旁边

4 个答案: