Question

我有以下HTML和CSS，它们分别创建两个div和两个箭头。

        .arrow{
         stroke:black;
         stroke-width:3; 
         marker-end:url(#arrow)
       }
       .arrowYellow{
        stroke: #FFFF00;
       }
      .arrowGreen{
      stroke: #21e324;
       }
    .taskList{
      border: 3px solid black;
      margin: auto;
      width: 200px;
      font-size: 25px;
    }
    .container{
      display: -webkit-flex;
      display: flex;
      flex-wrap:wrap;
    }
    .task{
      flex: 1 1 0;
      border: 3px solid #808080;
      padding: 10px;
      font-size: 20px;
      min-height: 52px;
      overflow: hidden;
    }
    .container .task1 + .task2 {
      margin-left: 300px;
    }
    .task3{
      border-left: none;
      border-right: none;
    }
    li{ 
      list-style-type: none;
    }

    <div class="container">
     <div class="task task1 text-center">Task Name1</div>
     <svg height="100%" width="30%">
     <defs>
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
    orient="auto">
        <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
    </marker>
    </defs>

    <line x1="0%" y1="50%" x2="20%" y2="50%" class="arrow arrowGreen" />
  
    <defs>
     <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
    orient="auto">
      <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
    </marker>
    </defs>

     <line x1="100%" y1="50%" x2="80%" y2="50%" class="arrow arrowGreen" />
    </svg>
    <div class="task task2 text-center">Task Name2</div>
    </div>

我想知道如何在两个指向彼此的绿色箭头之间添加另一个div。这可能吗？还有其他办法吗？

我将非常感谢您的帮助

Answer 1

使用abc类添加了一个新的div并添加了这些样式

.container {
  position: relative;
}

.abc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.arrow {
  stroke: black;
  stroke-width: 3;
  marker-end: url(#arrow)
}

.arrowYellow {
  stroke: #FFFF00;
}

.arrowGreen {
  stroke: #21e324;
}

.taskList {
  border: 3px solid black;
  margin: auto;
  width: 200px;
  font-size: 25px;
}

.container {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.task {
  flex: 1 1 0;
  border: 3px solid #808080;
  padding: 10px;
  font-size: 20px;
  min-height: 52px;
  overflow: hidden;
}

.container .task1+.task2 {
  margin-left: 300px;
}

.task3 {
  border-left: none;
  border-right: none;
}

li {
  list-style-type: none;
}

.container {
  position: relative;
}

.abc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="task task1 text-center">Task Name1</div>
  <svg height="100%" width="30%">
 <defs>
 <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
orient="auto">
<path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
</marker>
</defs>

<line x1="0%" y1="50%" x2="20%" y2="50%" class="arrow arrowGreen" />

<defs>
 <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
orient="auto">
  <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
</marker>
</defs>

 <line x1="100%" y1="50%" x2="80%" y2="50%" class="arrow arrowGreen" />
</svg>
  <div class="task task2 text-center">Task Name2</div>
  <div class="abc">Task center</div>
</div>

在3格之间绝对保留svg

.arrow {
  stroke: black;
  stroke-width: 3;
  marker-end: url(#arrow)
}

.arrowYellow {
  stroke: #FFFF00;
}

.arrowGreen {
  stroke: #21e324;
}

.taskList {
  border: 3px solid black;
  margin: auto;
  width: 200px;
  font-size: 25px;
}

.container {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}

.task {
  flex: 1 1 0;
  border: 3px solid #808080;
  padding: 10px;
  font-size: 20px;
  min-height: 52px;
  overflow: hidden;
}

.container .task1+.task2 {
  margin-left: 300px;
}

.task3 {
  border-left: none;
  border-right: none;
}

li {
  list-style-type: none;
}

.container {
  position: relative;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="task task1 text-center">Task Name1</div>
  <div class="task task1 text-center">Task center</div>
  <svg height="100%" width="33%">
 <defs>
 <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
orient="auto">
<path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
</marker>
</defs>

<line x1="0%" y1="50%" x2="20%" y2="50%" class="arrow arrowGreen" />

<defs>
 <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" 
orient="auto">
  <path d="M2,1 L2,10 L10,6 L2,2" style="fill:black;" />
</marker>
</defs>

 <line x1="100%" y1="50%" x2="80%" y2="50%" class="arrow arrowGreen" />
</svg>
  <div class="task task2 text-center">Task Name2</div>

</div>

Answer 2

您的原始解决方案（以及其他人在此处提供的变体）都将SVG直接置于“容器”部分下，您的文本部分也位于该部分中-很难对齐所有内容并控制位置，缩放等。要在调整边距/偏移量等方面做出足够的努力，最好尝试使用其他方法。

据我所见，两个“箭头”图是分开的，从逻辑上讲每个都属于其文本框。

因此，您应该考虑构造HTML以反映所显示内容的逻辑组成，例如：

<div class="container">
   <!-- left-side division -->
   <div class="task task1">
       <div class="text-center">Task1</div>
       <div><svg>right-pointing-arrow-here</svg></div>
   </div>

   <!-- center division -->
   <div class="in-the-middle">
       <div class="text-center">midtext</div>
        <div><svg>(if-you-need-any-graphics-in-the-center)</svg></div>
   </div>

   <!-- right-side division -->
   <div class="task task2">
       <div><svg>left-pointing-arrow-here</svg></div>
       <div class="text-center">Task2</div>
   </div>
<div>

请注意，我仅在此处包括内容结构，我将留给您样式（您需要使用display:和/或float:和{{1}适当地对所有内部样式进行样式设置}属性，以使它们彼此之间处于正确的顺序。

在两个箭头之间添加文本

2 个答案: