让div不要互相推..

Question

图片是我想要的布局但是当你盘旋时，一切都搞砸了。当下一个div斜体时，div开始移动并水平移动。如何在100％的时间内保持这种精确的布局？

.project-link {
font-family: 'UtopiaStd';   
color:#010202;
font-size:5.6vw;
white-space:nowrap;
text-decoration:none;
margin-right: 3%;
line-height:125%;
border-bottom: solid transparent 2px; }

https://jsfiddle.net/zjkouzbo/1/

Answer 1

由于<div class="project_miniwrap"> <div class="group-block"> <a>Link 1</a> <a>Link 2</a> </div> <div class="group-block"> <a>Link 3</a> <a>Link 4</a> </div> </div> 标记是内联元素，因此它会调整哪个＆＃39;行＆＃39;它是在父块元素更改宽度时打开，或者在您的情况下链接宽度更改大小。如果要保留链接1和2在同一行上的特定布局，但与其余行不同，则应在块元素中组织每个组。

NSMutableArray *array = [NSMutableArray createWithObjects: /*comma separated list of int's*/];

Answer 2

解决方案1：

尝试white-space:nowrap时，你有正确的想法。要将前两个链接保持在一起并将它们保持在一行上，请将它们包装在父元素中，然后将<div class="line"> <a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a> <a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a> </div> 应用于该父元素。如果你在锚元素和父元素上都有这个，那么你就不会破坏链接中间或它们之间的线。

.line{
  white-space: nowrap;
}

CSS

 

新小提琴：https：//jsfiddle.net/zjkouzbo/2/

解决方案2：

使用HTML实体<a class="project-link" id="one" href="#modal1">Maru speaker design <span> (1) </span> </a>&nbsp;<a class="project-link" id="two" href="#modal2">Lights — Out <span> (2) </span></a> 在要保留在同一行的锚元素之间放置一个不间断的空格。只需确保在两个元素之间取出任何其他空格，包括换行符。这使得你的代码有点烦人的阅读，但它并没有受到＆＃34; div-itis＆＃34;一个解决方案。

Task

第二小提琴：https：//jsfiddle.net/zjkouzbo/3/

Answer 3

添加

display:inline-block

并删除您添加到project-link的换行符解决了这个问题。

https://jsfiddle.net/70dceskq/1/