Выровнять элемент справа от его родителя, который плавает влево - PullRequest
Новая
       41

Выровнять элемент справа от его родителя, который плавает влево

1 голос
/ 17 октября 2019

Я хочу всплывающую подсказку над некоторыми левосторонними элементами. Я хочу, чтобы некоторые всплывающие подсказки были выровнены по левому краю их родного брата, а некоторые - по правому краю их всплывающих подсказок. Я не могу понять, как выровнять элементы по правому краю относительно левого смещенного брата.

Ниже приведен код, который я пробовал. Я пытался заставить всплывающие подсказки на зеленом и синем сегментах выравниваться по правому краю цветных сегментов, а не по левому, но это не работает. 

.textContent {
  margin: 5px  0;
}
.bar {
	box-sizing: border-box;
	cursor: default;
	height: 10px;
  overflow: visible;
	width: 100%;
}
.segment {
	cursor: pointer;
	display: inline-block;
	float: left;
  height: inherit;
	position: relative;
  width: 20%;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: orange;
}
.section3 {
  background-color: yellow;
}
.section4 {
  background-color: green;
}
.section5 {
  background-color: blue;
}
.segment .tooltip {
	background-color: #ffffff;
	border: 1px solid #cc0000;
	border-radius: 5px;
	color: #000000;
	float: left;
	margin-top: 15px;
	padding: 5px;
	position: absolute;
	text-align: center;
	visibility: hidden;
	z-index: 1;
}
.alignRightTooltip {
  float: right;
}
.segment:hover .tooltip {
  visibility: visible;
}
<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the <SPAN style="color: green; font-weight: bold">green</SPAN> and <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip alignRightTooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip alignRightTooltip">
      section5
    </SPAN>
  </DIV>
</DIV>

Буду признателен за любые отзывы, не знаю, что я делаю не так.

Спасибо!

Ответы [ 3 ]

2 голосов
/ 17 октября 2019

Плз попробуйте этот код .. Если вы хотите выравнивание по правому краю для всплывающей подсказки, добавьте класс "выравнивание по правому краю" ..

HTML 

<DIV class="segment section4 right-align">
  <SPAN class="tooltip alignRightTooltip">
    section4
  </SPAN>
</DIV>
<DIV class="segment section5 right-align">
  <SPAN class="tooltip alignRightTooltip">
    section5
  </SPAN>
</DIV>

CSS 

.segment.right-align span {
  right: 0;
}
1 голос
/ 17 октября 2019

Добавьте приведенный ниже код к своему коду, чтобы выровнять подсказки по правой стороне 

  .segment.section4 .tooltip, .segment.section5 .tooltip {
        right: 0;
    }

Рабочая демонстрация 

.textContent {
  margin: 5px 0;
}

.bar {
  box-sizing: border-box;
  cursor: default;
  height: 10px;
  overflow: visible;
  width: 100%;
}

.segment {
  cursor: pointer;
  display: inline-block;
  float: left;
  height: inherit;
  position: relative;
  width: 20%;
}

.section1 {
  background-color: red;
}

.section2 {
  background-color: orange;
}

.section3 {
  background-color: yellow;
}

.section4 {
  background-color: green;
}

.section5 {
  background-color: blue;
}

.segment .tooltip {
  background-color: #ffffff;
  border: 1px solid #cc0000;
  border-radius: 5px;
  color: #000000;
  float: left;
  margin-top: 15px;
  padding: 5px;
  position: absolute;
  text-align: center;
  visibility: hidden;
  z-index: 1;
}

.alignRightTooltip {
  float: right;
}

.segment:hover .tooltip {
  visibility: visible;
}

.segment.section4 .tooltip,
.segment.section5 .tooltip {
  right: 0;
}
<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the
  <SPAN style="color: green; font-weight: bold">green</SPAN> and
  <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip alignRightTooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip alignRightTooltip">
      section5
    </SPAN>
  </DIV>
</DIV>
0 голосов
/ 17 октября 2019

Пожалуйста, убедитесь, что это то, что вы ожидали, и отметьте это как правильный ответ, если это решит вашу цель 

.textContent {
  margin: 5px  0;
}
.bar {
	box-sizing: border-box;
	cursor: default;
	height: 10px;
  overflow: visible;
	width: 100%;
}
.segment {
	cursor: pointer;
	display: inline-block;
	float: left;
  height: inherit;
	position: relative;
  width: 20%;
}
.section1 {
  background-color: red;
}
.section2 {
  background-color: orange;
}
.section3 {
  background-color: yellow;
}
.section4 {
  background-color: green;
}
.section5 {
  background-color: blue;
}
.segment .tooltip {
	background-color: #ffffff;
	border: 1px solid #cc0000;
	border-radius: 5px;
	color: #000000;
	margin-top: 15px;
	padding: 5px;
	position: relative;
	text-align: center;
	visibility: hidden;
	z-index: 1;
}
.segment:hover .tooltip {
  visibility: visible;
  float:right;
}
.segment:hover .tooltipLeft {
  visibility: visible;
  float:left !important;
}
<DIV class="textContent">
  Hover over bar to display tooltips
</DIV>
<DIV class="textContent">
  The tooltips on the <SPAN style="color: green; font-weight: bold">green</SPAN> and <SPAN style="color: blue; font-weight: bold">blue</SPAN> bars should align to the right hand side of the segments
</DIV>
<DIV class="bar">
  <DIV class="segment section1">
    <SPAN class="tooltip tooltipLeft ">
      section1
    </SPAN>
  </DIV>
  <DIV class="segment section2">
    <SPAN class="tooltip tooltipLeft ">
      section2
    </SPAN>
  </DIV>
  <DIV class="segment section3">
    <SPAN class="tooltip tooltipLeft ">
      section3
    </SPAN>
  </DIV>
  <DIV class="segment section4">
    <SPAN class="tooltip">
      section4
    </SPAN>
  </DIV>
  <DIV class="segment section5">
    <SPAN class="tooltip">
      section5
    </SPAN>
  </DIV>
</DIV>
...