Question

＆＃13;

@media (max-width: 1000px) {
    #sub { display: none; }
    #sub2 { width:50%; }
    #sub2 > div:nth-of-type(1):before { content: "First Name - "; }
    #sub2 > div:nth-of-type(2):before { content: "Last Name - "; }
    #sub2 > div:nth-of-type(3):before { content: "Middle Name - "; }
}

＆＃13;

<div id="Main">
<section id="sub">
    <div>First Name</div>
    <div>Last Name</div>
    <div>Middle Name</div>
</section>
<section id="sub2">
    <div>foo first</div>
    <div>foo Last</div>
    <div>foo Middle</div>
</section>
</div>

＆＃13;

当屏幕尺寸属于移动设备时，我会应用隐藏#sub的css，并将#sub2的宽度设为50%。然后我使用div:nth-of-type(1):before {content: "First Name - "; }等在值之前显示子标题。一切正常，但结果是这样的：

First Name - first
Last Name - Last
Middle Name - middle

我无法调整价值观，因为我设定的风格是整个＆＃34;名字 - 第一个＆＃34;。不只是价值＆＃34;第一＆＃34;。我该如何解决这个问题？

Answer 1

你可以向左浮动#sub，然后#sub2将在#sub旁边。然后你可以分别设置#sub和＃sub2的样式。

＆＃13;

#sub span {display:none;}
@media (max-width: 1000px) {
  #sub {width:120px;float:left;}
  #sub span {display:inline-block;}
}

＆＃13;

<div id="Main">
<section id="sub">
    <div>First Name <span> - </span></div>
    <div>Last Name <span> - </span></div>
    <div>Middle Name <span> - </span></div>
</section>
<section id="sub2">
    <div>foo first</div>
    <div>foo Last</div> 
    <div>foo Middle</div>
</section>
</div>

＆＃13;

如何将其分为两个元素？

1 个答案: